In a previous example, “Setting the horizontal spacing between items in a LinkBar control in Flex”, we saw how you could set the horizontal spacing between items in a Flex LinkBar control by setting the horizontalGap style.

The following example shows how you can control the spacing between a LinkBar control’s individual LinkButton control’s label and icon by setting the horizontalGap style on the LinkBar control’s linkButtonStyleName style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/20/setting-the-horizontal-spacing-between-an-item-label-and-icon-in-a-linkbar-control-in-flex/ -->
<mx:Application name="LinkBar_linkButtonStyleName_horizontalGap_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Style>
        .linkBtnStyles {
            horizontalGap: 0;
        }
 
        LinkBar {
            linkButtonStyleName: linkBtnStyles;
        }
    </mx:Style>
 
    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;
 
            protected function slider_change(evt:SliderEvent):void {
                var btnStyles:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".linkBtnStyles");
                btnStyles.setStyle("horizontalGap", evt.value);
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="horizontalGap:" direction="horizontal">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="20"
                        value="0"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true"
                        change="slider_change(event);"/>
                <mx:Label text="{slider.value}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:LinkBar id="linkBar">
        <mx:dataProvider>
            <mx:Array>
                <mx:Object label="Alert" />
                <mx:Object label="Button" icon="@Embed('assets/Button.png')" />
                <mx:Object label="ButtonBar" icon="@Embed('assets/ButtonBar.png')" />
                <mx:Object label="CheckBox" icon="@Embed('assets/CheckBox.png')" />
                <mx:Object label="ColorPicker" icon="@Embed('assets/ColorPicker.png')" />
                <mx:Object label="ComboBox" icon="@Embed('assets/ComboBox.png')" />
            </mx:Array>
        </mx:dataProvider>
    </mx:LinkBar>
 
</mx:Application>
 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree