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>
 
Tagged with:
 
About The Author

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.

5 Responses to Setting the tab width on a TabBar control in Flex

  1. Dev says:

    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. deenalex says:

    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. Seth says:

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

    • Peter deHaan says:

      @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

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree