Returns the text baseline measurement, in pixels.

The collection of data to be displayed with tabs. The default tab initializer interprets this data to customize the tabs with various fields available to buttons, including the following:

• label
• defaultIcon
• upIcon
• downIcon
• hoverIcon
• disabledIcon
• defaultSelectedIcon
• selectedUpIcon
• selectedDownIcon
• selectedHoverIcon
• selectedDisabledIcon
• isEnabled
• name

The following example passes in a data provider:

list.dataProvider = new ArrayCollection(
[
    { label: "General", defaultIcon: new Image( generalTexture ) },
    { label: "Security", defaultIcon: new Image( securityTexture ) },
    { label: "Advanced", defaultIcon: new Image( advancedTexture ) },
]);

The default value is null.

See also

Indicates if this tab bar can initiate drag and drop operations by touching an item and dragging it. The dragEnabled property enables dragging items, but dropping items must be enabled separately with the dropEnabled property.

In the following example, a tab bar's items may be dragged:

tabs.dragEnabled = true;

See also

Drag and drop is restricted to components that have the same dragFormat.

In the following example, the drag format of two tab bars is customized:

tabs1.dragFormat = "my-custom-format";
tabs2.dragFormat = "my-custom-format";

The default value is "feathers-tab-bar-item".

Indicates if this tab bar can accept items that are dragged and dropped over the tab bar's hit area.

In the following example, a tab bar's items may be dropped:

tabs.dropEnabled = true;

See also

The field in the item that determines if the tab is enabled. If the item does not have this field, and a enabledFunction is not defined, then the tab will default to being enabled, unless the tab bar is not enabled. All tabs will always be disabled if the tab bar is disabled.

All of the label fields and functions, ordered by priority:

1. enabledFunction
2. enabledField

In the following example, the enabled field is customized:

tabs.enabledField = "isEnabled";

The default value is "enabled".

See also

A function used to determine if a specific tab is enabled. If this function is not null, then the enabledField will be ignored.

The function is expected to have the following signature:

function( item:Object ):Boolean

All of the enabled fields and functions, ordered by priority:

1. enabledFunction
2. enabledField

In the following example, the enabled function is customized:

tabs.enabledFunction = function( item:Object ):Boolean
{
   return item.isEnabled;
};

The default value is null.

See also

If not null, creates the first tab. If the firstTabFactory is null, then the tab bar will use the tabFactory. The first tab must be an instance of ToggleButton. This factory can be used to change properties on the first tab when it is initially created. For instance, if you are skinning Feathers components without a theme, you might use this factory to set skins and other styles on the first tab.

This function is expected to have the following signature:

function():ToggleButton

In the following example, a custom first tab factory is passed to the tab bar:

tabs.firstTabFactory = function():ToggleButton
{
    var tab:ToggleButton = new ToggleButton();
    tab.defaultSkin = new Image( upTexture );
    tab.defaultSelectedSkin = new Image( selectedTexture );
    tab.downSkin = new Image( downTexture );
    return tab;
};

The default value is null.

See also

The value added to the styleNameList of the first tab. This variable is protected so that sub-classes can customize the first tab style name in their constructors instead of using the default style name defined by DEFAULT_CHILD_STYLE_NAME_TAB.

To customize the first tab name without subclassing, see customFirstTabStyleName.

See also

The default IStyleProvider for all TabBar components.

The default value is null.

See also

The field in the item that contains a display object to be displayed as an icon or other graphic next to the label in the tab.

Warning: It is your responsibility to dispose all icons included in the data provider and accessed with iconField, or any display objects returned by iconFunction. These display objects will not be disposed when the list is disposed. Not disposing an icon may result in a memory leak.

All of the icon fields and functions, ordered by priority:

1. iconFunction
2. iconField

In the following example, the icon field is customized:

tabs.iconField = "photo";

The default value is "icon".

See also

A function used to generate an icon for a specific tab, based on its associated item in the data provider.

Note: This function may be called more than once for each individual item in the tab bar's data provider. The function should not simply return a new icon every time. This will result in the unnecessary creation and destruction of many icons, which will overwork the garbage collector, hurt performance, and possibly lead to memory leaks. It's better to return a new icon the first time this function is called for a particular item and then return the same icon if that item is passed to this function again.

Warning: It is your responsibility to dispose all icons included in the data provider and accessed with iconField, or any display objects returned by iconFunction. These display objects will not be disposed when the list is disposed. Not disposing an icon may result in a memory leak.

The function is expected to have the following signature:

function( item:Object ):DisplayObject

All of the icon fields and functions, ordered by priority:

1. iconFunction
2. iconField

In the following example, the icon function is customized:

var cachedIcons:Dictionary = new Dictionary( true );
tabs.iconFunction = function( item:Object ):DisplayObject
{
   if(item in cachedIcons)
   {
       return cachedIcons[item];
   }
   var icon:Image = new Image( textureAtlas.getTexture( item.textureName ) );
   cachedIcons[item] = icon;
   return icon;
};

The default value is null.

See also

The field in the item that contains the label text to be displayed by the tabs. If the item does not have this field, and a labelFunction is not defined, then the tabs will default to calling toString() on the item.

All of the label fields and functions, ordered by priority:

1. labelFunction
2. labelField

In the following example, the label field is customized:

tabs.labelField = "text";

The default value is "label".

See also

A function used to generate label text for a specific tab. If this function is not null, then the labelField will be ignored.

The function is expected to have the following signature:

function( item:Object ):String

All of the label fields and functions, ordered by priority:

1. labelFunction
2. labelField

In the following example, the label function is customized:

tabs.labelFunction = function( item:Object ):String
{
   return item.label + " (" + item.unread + ")";
};

The default value is null.

See also

If not null, creates the last tab. If the lastTabFactory is null, then the tab bar will use the tabFactory. The last tab must be an instance of ToggleButton. This factory can be used to change properties on the last tab when it is initially created. For instance, if you are skinning Feathers components without a theme, you might use this factory to set skins and other styles on the last tab.

This function is expected to have the following signature:

function():ToggleButton

In the following example, a custom last tab factory is passed to the tab bar:

tabs.lastTabFactory = function():ToggleButton
{
    var tab:ToggleButton = new Button();
    tab.defaultSkin = new Image( upTexture );
    tab.defaultSelectedSkin = new Image( selectedTexture );
    tab.downSkin = new Image( downTexture );
    return tab;
};

The default value is null.

See also

The value added to the styleNameList of the last tab. This variable is protected so that sub-classes can customize the last tab style name in their constructors instead of using the default style name defined by DEFAULT_CHILD_STYLE_NAME_TAB.

To customize the last tab name without subclassing, see customLastTabStyleName.

See also

The index of the currently selected tab. Returns -1 if no tab is selected.

In the following example, the tab bar's selected index is changed:

tabs.selectedIndex = 2;

The following example listens for when selection changes and requests the selected index:

function tabs_changeHandler( event:Event ):void
{
    var tabs:TabBar = TabBar( event.currentTarget );
    var index:int = tabs.selectedIndex;
}
tabs.addEventListener( Event.CHANGE, tabs_changeHandler );

The default value is -1.

See also

The currently selected item from the data provider. Returns null if no item is selected.

In the following example, the tab bar's selected item is changed:

tabs.selectedItem = tabs.dataProvider.getItemAt(2);

The following example listens for when selection changes and requests the selected item:

function tabs_changeHandler( event:Event ):void
{
    var tabs:TabBar = TabBar( event.currentTarget );
    var item:Object = tabs.selectedItem;
}
tabs.addEventListener( Event.CHANGE, tabs_changeHandler );

The default value is null.

See also

Creates each tab. A tab must be an instance of ToggleButton. This factory can be used to change properties on the tabs when they are first created. For instance, if you are skinning Feathers components without a theme, you might use this factory to set skins and other styles on a tab.

Optionally, the first tab and the last tab may be different than the other tabs in the middle. Use the firstTabFactory and/or the lastTabFactory to customize one or both of these tabs.

This function is expected to have the following signature:

function():ToggleButton

In the following example, a custom tab factory is passed to the tab bar:

tabs.tabFactory = function():ToggleButton
{
    var tab:ToggleButton = new ToggleButton();
    tab.defaultSkin = new Image( upTexture );
    tab.defaultSelectedSkin = new Image( selectedTexture );
    tab.downSkin = new Image( downTexture );
    return tab;
};

The default value is null.

See also

Modifies the properties of an individual tab, using an item from the data provider. The default initializer will set the tab's label and icons. A custom tab initializer can be provided to update additional properties or to use different field names in the data provider.

This function is expected to have the following signature:

function( tab:ToggleButton, item:Object ):void

In the following example, a custom tab initializer is passed to the tab bar:

tabs.tabInitializer = function( tab:ToggleButton, item:Object ):void
{
    tab.label = item.text;
    tab.defaultIcon = item.icon;
};

See also

An object that stores properties for all of the tab bar's tabs, and the properties will be passed down to every tab when the tab bar validates. For a list of available properties, refer to feathers.controls.ToggleButton.

These properties are shared by every tab, so anything that cannot be shared (such as display objects, which cannot be added to multiple parents) should be passed to tabs using the tabFactory or in the theme.

If the subcomponent has its own subcomponents, their properties can be set too, using attribute @ notation. For example, to set the skin on the thumb which is in a SimpleScrollBar, which is in a List, you can use the following syntax:

list.verticalScrollBarProperties.@thumbProperties.defaultSkin = new Image(texture);

Setting properties in a tabFactory function instead of using tabProperties will result in better performance.

In the following example, the tab bar's tab properties are updated:

tabs.tabProperties.iconPosition = RelativePosition.RIGHT;

The default value is null.

See also

Resets the properties of an individual tab, using the item from the data provider that was associated with the tab.

This function is expected to have one of the following signatures:

function( tab:ToggleButton ):void

function( tab:ToggleButton, oldItem:Object ):void

In the following example, a custom tab releaser is passed to the tab bar:

tabs.tabReleaser = function( tab:ToggleButton, oldItem:Object ):void
{
    tab.label = null;
    tab.defaultIcon = null;
};

See also

The value added to the styleNameList of the tabs. This variable is protected so that sub-classes can customize the tab style name in their constructors instead of using the default style name defined by DEFAULT_CHILD_STYLE_NAME_TAB.

To customize the tab style name without subclassing, see customTabStyleName.

See also

The toggle group.

Constructor.

Parameters

Parameters

Changes the selectedIndex property, but animates the selectionSkin to the new position, as if the user triggered a tab.

Parameters

See also

Changes the selectedItem property, but animates the selectionSkin to the new position, as if the user triggered a tab.

Parameters

See also

Dispatched when the selected tab changes.

The properties of the event object have the following values:

See also

Dispatched when one of the tabs is triggered. The data property of the event contains the item from the data provider that is associated with the tab that was triggered.

The following example listens to Event.TRIGGERED on the tab bar:

tabs.dataProvider = new ArrayCollection(
[
    { label: "1" },
    { label: "2" },
    { label: "3" },
]);
tabs.addEventListener( Event.TRIGGERED, function( event:Event, data:Object ):void
{
   trace( "The tab with label \"" + data.label + "\" was triggered." );
}

The properties of the event object have the following values:

Determines how the tabs are vertically aligned within the bounds of the tab bar (on the y-axis).

The following example aligns the tabs to the top:

tabs.verticalAlign = VerticalAlign.TOP;

The default value is feathers.layout.VerticalAlign.JUSTIFY.

See also

A skin displayed over the selected tab. Its position is animated when the selection changes.

The following example passes the tab bar a selection skin:

var skin:Image = new Image(texture)
skin.scale9Grid = new Rectangle(1, 2, 4, 4);
tabs.selectionSkin = skin;

The default value is null.

See also

The easing function used for moving and resizing the selectionSkin when the selected tab changes.

In the following example, the ease of the animation that moves the selectionSkin is customized:

tabs.selectionChangeEase = Transitions.EASE_IN_OUT;

The default value is starling.animation.Transitions.EASE_OUT.

See also

The time, in seconds, of the animation that changes the position and size of the selectionSkin skin when the selected tab changes.

The following example customizes the duration to 500ms:

tabs.selectionChangeDuration = 0.5;

The default value is 0.25.

See also

The minimum space, in pixels, between the tab bar's left edge and the tabs.

In the following example, the padding on the left edge of the tab bar is set to 20 pixels:

tabs.paddingLeft = 20;

The default value is 0.

See also

The minimum space, in pixels, between the tab bar's bottom edge and the tabs.

In the following example, the padding on the bottom edge of the tab bar is set to 20 pixels:

tabs.paddingBottom = 20;

The default value is 0.

See also

The minimum space, in pixels, between the tab bar's right edge and the tabs.

In the following example, the padding on the right edge of the tab bar is set to 20 pixels:

tabs.paddingRight = 20;

The default value is 0.

See also

The minimum space, in pixels, between the tab bar's top edge and the tabs.

In the following example, the padding on the top edge of the tab bar is set to 20 pixels:

tabs.paddingTop = 20;

The default value is 0.

See also

Quickly sets all padding properties to the same value. The padding getter always returns the value of paddingTop, but the other padding values may be different.

In the following example, the padding of all sides of the tab bar is set to 20 pixels:

tabs.padding = 20;

The default value is 0.

See also

Space, in pixels, between the last two tabs. If NaN, the default gap property will be used.

The following example sets the gap between the last and next to last tab to a different value than the standard gap:

tabs.lastGap = 30;
tabs.gap = 20;

The default value is NaN.

See also

Determines how the tabs are horizontally aligned within the bounds of the tab bar (on the x-axis).

The following example aligns the tabs to the left:

tabs.horizontalAlign = HorizontalAlign.LEFT;

The default value is feathers.layout.HorizontalAlign.JUSTIFY.

See also

Space, in pixels, between tabs.

In the following example, the tab bar's gap is set to 20 pixels:

tabs.gap = 20;

The default value is 0.

See also

Space, in pixels, between the first two tabs. If NaN, the default gap property will be used.

The following example sets the gap between the first and second tab to a different value than the standard gap:

tabs.firstGap = 30;
tabs.gap = 20;

The default value is NaN.

See also

A skin to display when dragging one an item to indicate where it can be dropped.

In the following example, the tab bar's drop indicator is provided:

tabs.dropIndicatorSkin = new Image( texture );

The default value is null.

If true, the tabs will be equally sized in the direction of the layout. In other words, if the tab bar is horizontal, each tab will have the same width, and if the tab bar is vertical, each tab will have the same height. If false, the tabs will be sized to their ideal dimensions.

The following example aligns the tabs to the middle without distributing them:

tabs.direction = Direction.VERTICAL;
tabs.verticalAlign = VerticalAlign.MIDDLE;
tabs.distributeTabSizes = false;

The default value is true.

The tab bar layout is either vertical or horizontal.

In the following example, the tab bar's direction is set to vertical:

tabs.direction = Direction.VERTICAL;

Note: The Direction.NONE constant is not supported.

The default value is feathers.layout.Direction.HORIZONTAL.

See also

A style name to add to all tabs in this tab bar. Typically used by a theme to provide different styles to different tab bars.

In the following example, a custom tab style name is provided to the tab bar:

tabs.customTabStyleName = "my-custom-tab";

In your theme, you can target this sub-component style name to provide different styles than the default:

getStyleProviderForClass( ToggleButton ).setFunctionForStyleName( "my-custom-tab", setCustomTabStyles );

The default value is null.

See also

A style name to add to the last tab in this tab bar. Typically used by a theme to provide different styles to the last tab.

In the following example, a custom last tab style name is provided to the tab bar:

tabs.customLastTabStyleName = "my-custom-last-tab";

In your theme, you can target this sub-component style name to provide different styles than the default:

getStyleProviderForClass( ToggleButton ).setFunctionForStyleName( "my-custom-last-tab", setCustomLastTabStyles );

The default value is null.

See also

A style name to add to the first tab in this tab bar. Typically used by a theme to provide different styles to the first tab.

In the following example, a custom first tab style name is provided to the tab bar:

tabs.customFirstTabStyleName = "my-custom-first-tab";

In your theme, you can target this sub-component style name to provide different styles than the default:

getStyleProviderForClass( ToggleButton ).setFunctionForStyleName( "my-custom-first-tab", setCustomFirstTabStyles );

The default value is null.

See also

The default value added to the styleNameList of the tabs.

See also