Flex Examples
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 http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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.
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
Nice to see that you started publish swfs with source code again. It’s much more usefull. Thanks!
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:
how can i set the tab height?
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.