Package	mx.containers
Class	public class TabNavigator
Inheritance	TabNavigator ViewStack Container UIComponent FlexSprite Sprite DisplayObjectContainer InteractiveObject DisplayObject EventDispatcher Object
Implements	IFocusManagerComponent

Note: The direct children of an MX navigator container must be MX containers, either MX layout or MX navigator containers, or the Spark NavigatorContent container. You cannot directly nest a control or a Spark container other than the Spark NavigatorContent container within a navigator; they must be children of an child MX container.

Like a ViewStack container, a TabNavigator container has a collection of child containers, in which only one child at a time is visible. Flex automatically creates a TabBar container at the top of the TabNavigator container, with a tab corresponding to each child container. Each tab can have its own label and icon. When the user clicks a tab, the corresponding child container becomes visible as the selected child of the TabNavigator container.

When you change the currently visible child container, you can use the hideEffect property of the container being hidden and the showEffect property of the newly visible child container to apply an effect to the child containers. The TabNavigator container waits for the hideEffect of the child container being hidden to complete before it reveals the new child container. You can interrupt a currently playing effect if you change the selectedIndex property of the TabNavigator container while an effect is playing.

To define the appearance of tabs in a TabNavigator, you can define style properties in a Tab type selector, as the following example shows:

  <fx:Style>
    @namespace mx "library://ns.adobe.com/flex/mx"
    mx|Tab {
       fillColors: #006699, #cccc66;
       upSkin: ClassReference("CustomSkinClass");
       overSkin: ClassReference("CustomSkinClass");
       downSkin: ClassReference("CustomSkinClass");
    }  
  </fx:Style>
  

The Tab type selector defines values on the hidden mx.controls.tabBarClasses.Tab class. The default values for the Tab type selector are defined in the defaults.css file.

You can also define the styles in a class selector that you specify using the tabStyleName style property; for example:

  <fx:Style>
    @namespace mx "library://ns.adobe.com/flex/mx"
    mx|TabNavigator {
       tabStyleName:myTabStyle;
    }
 
    .myTabStyle {
       fillColors: #006699, #cccc66;
       upSkin: ClassReference("CustomSkinClass");
       overSkin: ClassReference("CustomSkinClass");
       downSkin: ClassReference("CustomSkinClass");
    }
  </fx:Style>
  

A TabNavigator container has the following default sizing characteristics:

Show MXML Syntax

Hide MXML Syntax

  <mx:TabNavigator
    Styles
    fillAlphas="[0.60, 0.40, 0.75, 0.65]"
    fillColors="[0xFFFFFF, 0xCCCCCC, 0xFFFFFF, 0xEEEEEE]"
    firstTabStyleName="Value of the tabStyleName property"
    focusAlpha="0.4"
    focusRoundedCorners="tl tr bl br"
    horizontalAlign="left|center|right"
    horizontalGap="-1"
    lastTabStyleName="Value of the tabStyleName property"
    selectedTabTextStyleName="undefined"
    tabHeight="undefined"
    tabOffset="0"
    tabStyleName="Name of CSS style declaration that specifies styles for the tabs"
    tabWidth="undefined"
    >
      ...
      child tags
      ...
  </mx:TabNavigator>
  

View the examples

See also