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>
