Search Flex Components Free

Custom Search

January 14, 2008

Setting a label’s font weight on a Flex LinkBar and ToggleButtonBar control

The following example shows how you can set the font weight of a label on LinkBar control and ToggleButton control in Flex by setting the linkButtonStyleName style and buttonStyleName style respectively.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">
<mx:Style>
.myCustomLinkButtonStyleName
{

fontWeight: normal;
}
.myCustomButtonStyleName
{
fontWeight: normal;

}
</mx:Style>
<mx:Array id="arr">
<mx:Object label="One" />
<mx:Object label="Two" />
<mx:Object label="Three" />
<mx:Object label="Four" />

</mx:Array>
<mx:LinkBar id="linkBar" dataProvider="{arr}" linkButtonStyleName="myCustomLinkButtonStyleName" />
<mx:ToggleButtonBar id="toggleButtonBar" dataProvider="{arr}" buttonStyleName="myCustomButtonStyleName" />
</mx:Application>

Or, you can set the styles a bit more globally by using the following snippet:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">
<mx:Style>
LinkBar
{
linkButtonStyleName: regularFontWeight;
}
ToggleButtonBar
{
buttonStyleName: regularFontWeight;
}
.regularFontWeight { fontWeight: normal;
}
</mx:Style>
<mx:Array id="arr">
<mx:Object label="One" />
<mx:Object label="Two" />
<mx:Object label="Three" />

<mx:Object label="Four" />
</mx:Array>
<mx:LinkBar id="linkBar" dataProvider="{arr}" />
<mx:ToggleButtonBar id="toggleButtonBar" dataProvider="{arr}" />
</mx:Application>

Related Flex Tutorials