Setting the tab width on a TabBar control in Flex

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.

View MXML

<?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:

View MXML

<?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:

View MXML

<?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:

View MXML

<?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>

5 thoughts on “Setting the tab width on a TabBar control in Flex

  1. 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

  2. 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

  3. The Spark TabBar doesn’t have the “tabWidth” property. Any idea how to change tab width using the Spark component?

    1. @Seth,

      If you’re using a Spark TabBar, I believe you can just set the columnWidth property to your desired tab width, and then set the Boolean variableColumnWidth property to false, as seen in the following example:

       
      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
              xmlns:s="library://ns.adobe.com/flex/spark"
              xmlns:mx="library://ns.adobe.com/flex/mx">
       
          <s:TabBar id="tabby"
                    horizontalCenter="0" verticalCenter="0">
              <s:layout>
                  <s:HorizontalLayout gap="-1" columnWidth="100" variableColumnWidth="false" />
              </s:layout>
              <s:dataProvider>
                  <s:ArrayList source="[Boston,Chicago,Detroit,Los Angeles,New York]" />
              </s:dataProvider>
          </s:TabBar>
       
      </s:Application>

      Peter

Comments are closed.