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.


{ 4 comments… read them below or add one }
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.
Hi Gurus,
Is it possible to place the icon/image to the right of the label?
Regards,
Dan
@dan,
How about this?
You may need to tweak it if you expect the data provider to change at any point.
Peter
Thanks Peter