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.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/14/setting-a-labels-font-weight-on-a-flex-linkbar-and-togglebuttonbar-control/ -->
<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>

View source is enabled in the following example.

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/14/setting-a-labels-font-weight-on-a-flex-linkbar-and-togglebuttonbar-control/ -->
<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>

View source is enabled in the following example.

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

  1. It´s possible set in array of ToggleButtonBar a option “visible” or “enable”

    For example

    How to use to display or not ?

  2. How is it possible to add “close” buttons to the end of each of the link buttons of a LinkBar control?

    I want to have the close buttons, which when clicked should remove the corresponding child from the corresponding ViewStack (and also would remove the linkButton corresponding to it from the LinkBar)

    Any help?

    Thanks in advance :P

    –Bhaskar

  3. Hi,

    Does anyone know how to assign a unique style for each button in togglebuttonbar.
    I want that the last three buttons link to facebook, twitter an d myspace and therefore I need to color-code them.

    Please let me know if anyone has some input.

    Cheers,
    Patrick

Comments are closed.