In a previous example, “Horizontally aligning tabs within a TabBar control in Flex”, we saw how you could horizontally align tabs in a TabBar control by setting the horizontalAlign style.
The following example shows how you can align tabs vertically within a Flex TabBar control by setting the verticalAlign style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/20/vertically-aligning-tabs-within-a-tabbar-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
TabBar {
tabStyleName: myCustomTabStyleName;
selectedTabTextStyleName: myCustomSelectedTabTextStyleName;
}
.myCustomTabStyleName {
fillColors: haloBlue, haloGreen;
fillAlphas: 1.0, 1.0;
}
.myCustomSelectedTabTextStyleName {
color: white;
}
</mx:Style>
<mx:Array id="arr">
<mx:Object label="Button" />
<mx:Object label="ButtonBar" />
<mx:Object label="ColorPicker" />
<mx:Object label="ComboBox" />
</mx:Array>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="verticalAlign:">
<mx:ComboBox id="comboBox">
<mx:dataProvider>
<mx:Array>
<mx:Object label="top" />
<mx:Object label="middle" />
<mx:Object label="bottom" />
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:Box backgroundColor="black">
<mx:TabBar id="tabBar"
dataProvider="{arr}"
height="200"
tabWidth="100"
tabHeight="40"
verticalAlign="{comboBox.selectedItem.label}"
direction="vertical" />
</mx:Box>
</mx:Application>
