TabNavigator  - AS3 Flex

Пакет	mx.containers
Класс	public class TabNavigator
Наследование	TabNavigator ViewStack Container UIComponent FlexSprite Sprite DisplayObjectContainer InteractiveObject DisplayObject EventDispatcher Object
Реализует	IFocusManagerComponent

Примечание. Прямые нижестоящие элементы контейнера навигатора MX должны быть контейнерами MX (контейнерами макета MX или навигатора MX) или контейнером Spark NavigatorContent. В навигатор невозможно вложить элемент управления или контейнер Spark, не являющийся контейнером Spark NavigatorContent, напрямую. Вложения должны быть нижестоящими элементами нижестоящего контейнера MX.

Аналогично контейнеру ViewStack, контейнер TabNavigator имеет коллекцию нижестоящих контейнеров, в которых в конкретный момент отображается только один нижестоящий элемент. Flex автоматически создает контейнер TabBar в верхней области контейнера TabNavigator, при этом каждому нижестоящему контейнеру соответствует своя вкладка. Каждая вкладка может иметь собственную метку и значок. При выборе вкладки пользователем соответствующий нижестоящий контейнер становится видимым и отображается как выбранный нижестоящий элемент из контейнера TabNavigator.

При изменении видимого в данный момент нижестоящего контейнера можно использовать свойство hideEffect скрытого контейнера и свойство showEffect последнего отображенного нижестоящего контейнера для применения эффекта в нижестоящих контейнерах. Перед отображением нового нижестоящего контейнера контейнер TabNavigator ожидает завершения скрытия нижестоящего контейнера hideEffect. Применение эффекта можно остановить в процессе путем изменения свойства selectedIndex контейнера TabNavigator.

Для определения внешнего вида вкладок в TabNavigator используются свойства стиля в селекторе типа вкладки Tab, как показано в примере:

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

Селектор типа Tab определяет значения в скрытом классе mx.controls.tabBarClasses.Tab. Значения по умолчанию для селектора типа Tab определены в файле defaults.css.

С помощью свойства стиля tabStyleName можно также определить стили в селекторе класса, например:

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

Контейнер TabNavigator имеет следующие характеристики размеров по умолчанию:

Показать синтаксис MXML

Скрыть синтаксис MXML

  <mx:TabNavigator
    Styles
    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>
  

Посмотреть примеры

Связанные элементы API