Question

I have the following togglebuttonbar:

<mx:ToggleButtonBar buttonWidth="85" height="45" id="menuBar" width="595" x="0" y="23">
        <mx:dataProvider>
            <mx:Object data="{LocalConfig.CONNECTION_STATE}" icon="@Embed(source='resources/images/Bonjour.png')" label="   "/>
            <mx:Object data="{LocalConfig.LANGUAGES_STATE}" icon="@Embed(source='resources/images/languages.png')" label="   "/>
            <mx:Object data="{LocalConfig.TAGGING_STATE}" icon="@Embed(source='resources/images/tag.png')" label="   "/>
            <mx:Object data="{LocalConfig.FONT_MAPPING_STATE}" icon="@Embed(source='resources/images/FontPanel.png')" label="   "/>
            <mx:Object data="{LocalConfig.ERROR_CHECKING_STATE}" icon="@Embed(source='resources/images/Clear-Green-Button.png')" label="   "/>
            <mx:Object data="{LocalConfig.USERS_STATE}" icon="@Embed(source='resources/images/UserAccounts.png')" label="   "/>
            <mx:Object data="{LocalConfig.UPLOAD_STATE}" icon="@Embed(source='resources/images/Network.png')" label="   "/>
        </mx:dataProvider>
    </mx:ToggleButtonBar>

What i would like is that the last button has a 10 pixel horizontalGap so it stands apart from the rest of the buttons. I would also like for it to be a bit smaller than the other buttons. Is it possible to do it or should i try a different approach? I also tried to just define it as a seperate button but then you loose the effect of a pushed in button.

Answer 1

You can define a different style for the last element in a toggle button bar by using:

lastButtonStyleName

Using this you can style it however you like.

If you need to go more in depth you can extend the ToggleButtonBar class and make your overrides there as needed. 🙂