Setting the tab width on a Spark TabBar control in Flex 4

In a previous example, “Setting the tab width on a TabBar control in Flex”, we saw how you could set the tab width on an MX TabBar control in Flex by setting the aptly named tabWidth style.

The following example shows how you can set the tab width on a Spark TabBar control in Flex 4 by creating a horizontal layout and setting the columnWidth and variableColumnWidth properties.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/09/29/setting-the-tab-width-on-a-spark-tabbar-control-in-flex-4/ -->
<s:Application name="Spark_TabBar_columnWidth_test"
        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:controlBarContent>
        <mx:Form>
            <mx:FormItem label="tabWidth:">
                <s:HSlider id="slider"
                        minimum="40"
                        maximum="120"
                        value="100" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:TabBar id="tabby"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:HorizontalLayout gap="-1" columnWidth="{slider.value}" variableColumnWidth="false" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList source="[red,orange,yellow,green,blue]" />
        </s:dataProvider>
    </s:TabBar>
 
</s:Application>

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

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

  1. I am using the <s:TabBar control, but with a <s:VerticalLayout, so my tabs are vertical. I want them to all have the same width though. There are no columnWidth and variableColumnWidth properties in VerticalLayout. How can I set the tab width?

    In the below code, the overall tabbar width is 150, but each tab does its own thing:

  2. I would like to know how to prevent the truncation of the labels, I’m ok with variable width tabs, and want them sized to text width. However I would like to scroll the tab bar, and avoid the label truncation.

Comments are closed.