The following example shows how you can add icons to the LinkBar control in Flex by setting the iconField property.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/09/adding-icons-to-the-flex-linkbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Array id="arr">
<mx:Object label="Button"
ico="@Embed('assets/Button.png')" />
<mx:Object label="ButtonBar"
ico="@Embed('assets/ButtonBar.png')" />
<mx:Object label="CheckBox"
ico="@Embed('assets/CheckBox.png')" />
<mx:Object label="ColorPicker"
ico="@Embed('assets/ColorPicker.png')" />
</mx:Array>
<mx:LinkBar id="linkBar"
dataProvider="{arr}"
iconField="ico" />
</mx:Application>
View source is enabled in the following example.
If you are using a ViewStack as a data provider for the LinkBar control, you could use the following code instead:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/09/adding-icons-to-the-flex-linkbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:LinkBar id="linkBar"
dataProvider="{viewStack}" />
<mx:ViewStack id="viewStack" width="{linkBar.width}">
<mx:VBox label="Button"
icon="@Embed('assets/Button.png')">
<mx:Label text="Button..." />
</mx:VBox>
<mx:VBox label="ButtonBar"
icon="@Embed('assets/ButtonBar.png')">
<mx:Label text="ButtonBar..." />
</mx:VBox>
<mx:VBox label="CheckBox"
icon="@Embed('assets/CheckBox.png')">
<mx:Label text="CheckBox..." />
</mx:VBox>
<mx:VBox label="ColorPicker"
icon="@Embed('assets/ColorPicker.png')">
<mx:Label text="ColorPicker..." />
</mx:VBox>
</mx:ViewStack>
</mx:Application>
View source is enabled in the following example.





hi
This is just what I was looking for. But instead having icon and label horizontaly aligned, verticaly aligned in LinkBar. Something like “labelPlacment” property button has. Any suggestion how to do that?
many thanks in advance.