Flex - Part of spark Button bold label

Quick question.

Is it possible to have part of the label on a spark button be bold?

I'd like a toggleButton with label "Map ON/OFF". Toggling it on will set the "ON" part to bold.

Is this possible witout too much rework of the button itself?

Thanks =)

Solution

Quick answer.

You can use a custom skin if you're willing to make it a one-off.
It goes something like this:

create a custom skin for your ToggleButton by copying spark.skins.spark.ToggleButtonSkin
scroll down to the bottom of the code and find the Label with id 'labelDisplay'
replace it with something like this:

<s:HGroup gap="1" horizontalCenter="0" verticalCenter="1"
          left="10" right="10" top="2" bottom="2" verticalAlign="middle">

    <s:Label id="labelDisplay" maxDisplayedLines="1"/>
    <s:Label text=" ON" maxDisplayedLines="1" 
             fontWeight.selectedStates="bold"/>
    <s:Label text="/" maxDisplayedLines="1"/>
    <s:Label text="OFF" maxDisplayedLines="1"
             fontWeight="bold" fontWeight.selectedStates="normal"/>
</s:HGroup>

now assign your custom skin like this:

<s:ToggleButton label="Map" skinClass="path.to.skin.MyToggleButtonSkin"/>

As you can see, the first part of the label can still be set externally, but the ON/OFF part has been baked into the skin. This is a compromise to give you a quick solution. It'll be harder if you want it to be truly generic.