Setting the horizontal spacing between items in a LinkBar control in Flex

The following example shows how you can set the horizontal spacing between items in a Flex LinkBar control by setting the horizontalGap style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/20/setting-the-horizontal-spacing-between-items-in-a-linkbar-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            private function init():void {
                slider.value = linkBar.getStyle("horizontalGap");
            }
        ]]>
    </mx:Script>
 
    <mx:Array id="arr">
        <mx:Object label="Alert" />
        <mx:Object label="Button" />
        <mx:Object label="ButtonBar" />
        <mx:Object label="CheckBox" />
        <mx:Object label="ColorPicker" />
        <mx:Object label="ComboBox" />
    </mx:Array>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="horizontalGap:" direction="horizontal">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="20"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true" />
                <mx:Label text="{slider.value}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:LinkBar id="linkBar"
            dataProvider="{arr}"
            horizontalGap="{slider.value}"
            initialize="init();" />
 
</mx:Application>

View source is enabled in the following example.

3 thoughts on “Setting the horizontal spacing between items in a LinkBar control in Flex

  1. i was wondering if is it possible to change the size of the blue box that appears with once you roll over the mouse??

  2. You need to specify the css for the Buttons of the LinkBar.

    as:

    linkBar.setStyle('linkButtonStyleName', 'myLinkButtonStyleName');

    css:

    .myLinkButtonStyleName {
    	paddingTop: 0;
    	paddingRight: 2;
    	paddingLeft: 2;
    	paddingBottom: 0;
    }

Comments are closed.