Flex Examples
The following example shows how you can set the tab width on a Flex TabBar control by setting the aptly named tabWidth style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/04/setting-the-tab-width-on-a-tabbar-control-in-flex/ -->
<mx:Application name="TabBar_tabWidth_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Array id="arr">
<mx:Object label="Red" />
<mx:Object label="Orange" />
<mx:Object label="Yellow" />
<mx:Object label="Green" />
<mx:Object label="Blue" />
</mx:Array>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="tabWidth:">
<mx:HSlider id="slider"
minimum="40"
maximum="120"
value="100"
snapInterval="1"
tickInterval="10"
liveDragging="true" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:TabBar id="tabBar"
dataProvider="{arr}"
tabWidth="{slider.value}" />
</mx:Application>
View source is enabled in the following example.
You can also set the tabWidth style in an external .CSS file or <mx:Style /> block, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/04/setting-the-tab-width-on-a-tabbar-control-in-flex/ -->
<mx:Application name="TabBar_tabWidth_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
TabBar {
tabWidth: 120;
}
</mx:Style>
<mx:Array id="arr">
<mx:Object label="Red" />
<mx:Object label="Orange" />
<mx:Object label="Yellow" />
<mx:Object label="Green" />
<mx:Object label="Blue" />
</mx:Array>
<mx:TabBar id="tabBar"
dataProvider="{arr}" />
</mx:Application>
Or, you can set the tabWidth style using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/04/setting-the-tab-width-on-a-tabbar-control-in-flex/ -->
<mx:Application name="TabBar_tabWidth_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.events.SliderEvent;
private function slider_change(evt:SliderEvent):void {
tabBar.setStyle("tabWidth", evt.value);
}
]]>
</mx:Script>
<mx:Array id="arr">
<mx:Object label="Red" />
<mx:Object label="Orange" />
<mx:Object label="Yellow" />
<mx:Object label="Green" />
<mx:Object label="Blue" />
</mx:Array>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="tabWidth:">
<mx:HSlider id="slider"
minimum="40"
maximum="120"
value="100"
snapInterval="1"
tickInterval="10"
liveDragging="true"
change="slider_change(event);" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:TabBar id="tabBar"
dataProvider="{arr}"
tabWidth="100" />
</mx:Application>
Due to popular demand, here is the “same” example in a more ActionScript friendly format:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/04/setting-the-tab-width-on-a-tabbar-control-in-flex/ -->
<mx:Application name="TabBar_tabWidth_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
initialize="init();">
<mx:Script>
<![CDATA[
import mx.containers.ApplicationControlBar;
import mx.containers.Form;
import mx.containers.FormItem;
import mx.controls.HSlider;
import mx.controls.TabBar;
import mx.events.SliderEvent;
private var arr:Array;
private var slider:HSlider;
private var tabBar:TabBar;
private function init():void {
arr = [];
arr.push({label:"Red"});
arr.push({label:"Orange"});
arr.push({label:"Yellow"});
arr.push({label:"Green"});
arr.push({label:"Blue"});
slider = new HSlider();
slider.minimum = 40;
slider.maximum = 120;
slider.value = 100;
slider.snapInterval = 1;
slider.tickInterval = 10;
slider.liveDragging = true;
slider.addEventListener(SliderEvent.CHANGE,
slider_change);
var formItem:FormItem = new FormItem();
formItem.label = "tabWidth:";
formItem.addChild(slider);
var form:Form = new Form();
form.styleName = "plain";
form.addChild(formItem);
var appControlBar:ApplicationControlBar;
appControlBar = new ApplicationControlBar();
appControlBar.dock = true;
appControlBar.addChild(form);
addChildAt(appControlBar, 0);
tabBar = new TabBar();
tabBar.dataProvider = arr;
tabBar.setStyle("tabWidth", slider.value);
addChild(tabBar);
}
private function slider_change(evt:SliderEvent):void {
tabBar.setStyle("tabWidth", evt.value);
}
]]>
</mx:Script>
</mx:Application>
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
I want the tabs resize to 100% when its parent (TabBar or TabNevigator) resize. In fact, I want the tabs have an identical width based on the width of their parent not the label size within the tab. How can I achieve this ? Any ideas would be appreciated
Hi peter,
I have task to show bottom faced tab navigation, i mean opposite view of normal tab navigation. It depends on style of tab or i have to change codes in normal Tab navigation itself….
Thanks in Advance….
deenalex
The Spark TabBar doesn’t have the “tabWidth” property. Any idea how to change tab width using the Spark component?
@Seth,
If you’re using a Spark TabBar, I believe you can just set the
columnWidthproperty to your desired tab width, and then set the BooleanvariableColumnWidthproperty to false, as seen in the following example:Peter
Posted as a new example at http://blog.flexexamples.com/2010/09/29/setting-the-tab-width-on-a-spark-tabbar-control-in-flex-4/