class TabBar
package feathers.controls
extends FeathersControl › MeasureSprite › ValidatingSprite
implements IFocusObject, IDataSelector<Dynamic>, IIndexSelector
A line of tabs, where one may be selected at a time.
The following example sets the data provider, tells the tabs how to interpret the data, selects the second tab, and listens for when the selection changes:
var tabs = new TabBar();
tabs.dataProvider = new ArrayCollection([
{ text: "Latest Posts" },
{ text: "Profile" },
{ text: "Settings" }
]);
tabBar.itemToText = (item:Dynamic) -> {
return item.text;
};
tabs.selectedIndex = 1;
tabs.addEventListener(Event.CHANGE, tabs_changeHandler);
this.addChild(tabs);Events:
openfl.events.Event.CHANGE | Dispatched when either
|
|---|---|
feathers.events.TabBarEvent.ITEM_TRIGGER | Dispatched when the user taps or clicks a tab. The pointer must remain within the bounds of the tab on release, or the gesture will be ignored. |
1.0.0
.See also:
Static variables
staticfinalread onlyCHILD_VARIANT_TAB:String = "tabBar_tab"
The variant used to style the tab child components in a theme.
To override this default variant, set the
TabBar.customTabVariant property.
1.0.0
.See also:
Constructor
new(?dataProvider:IFlatCollection<Dynamic>, ?changeListener:Event ‑> Void)
Creates a new TabBar object.
1.0.0
.Variables
backgroundSkin:DisplayObject
The default background skin to display behind the tabs.
The following example passes a bitmap for the tab bar to use as a background skin:
tabBar.backgroundSkin = new Bitmap(bitmapData);1.0.0
.See also:
customTabVariant:String
A custom variant to set on all tabs, instead of
TabBar.CHILD_VARIANT_TAB.
The customTabVariant will be not be used if the result of
tabRecycler.create() already has a variant set.
1.0.0
.See also:
dataProvider:IFlatCollection<Dynamic>
The collection of data displayed by the tab bar.
Items in the collection must be class instances or anonymous structures. Do not add primitive values (such as strings, booleans, or numeric values) directly to the collection.
Additionally, all items in the collection must be unique object instances. Do not add the same instance to the collection more than once because a runtime exception will be thrown.
The following example passes in a data provider and tells the tabs how to interpret the data:
tabBar.dataProvider = new ArrayCollection([
{ text: "Latest Posts" },
{ text: "Profile" },
{ text: "Settings" }
]);
tabBar.itemToText = (item:Dynamic) -> {
return item.text;
};1.0.0
.See also:
disabledBackgroundSkin:DisplayObject
A background skin to display behind the tabs when the tab bar is disabled.
The following example gives the tab bar a disabled background skin:
tabBar.disabledBackgroundSkin = new Bitmap(bitmapData);
tabBar.enabled = false;1.0.0
.See also:
forceItemStateUpdate:Bool
Forces the tabRecycler.update() method to be called with the
TabBarItemState when the tab bar validates, even if the item's
state has not changed since the previous validation.
Before Feathers UI 1.2, update() was called more frequently, and this
property is provided to enable backwards compatibility, temporarily, to
assist in migration from earlier versions of Feathers UI.
In general, when this property needs to be enabled, its often because of
a missed call to dataProvider.updateAt() (preferred) or
dataProvider.updateAll() (less common).
The forceItemStateUpdate property may be removed in a future major
version, so it is best to avoid relying on it as a long-term solution.
1.2.0
.layout:ILayout
The layout algorithm used to position and size the tabs.
By default, if no layout is provided by the time that the tab bar initializes, a default layout that displays items horizontally will be created.
The following example tells the tab bar to use a custom layout:
var layout = new HorizontalDistributedLayout();
layout.maxItemWidth = 300.0;
tabBar.layout = layout;1.0.0
.tabRecycler:AbstractDisplayObjectRecycler<Dynamic, TabBarItemState, ToggleButton>
Manages tabs used by the tab bar.
In the following example, the tab bar uses a custom tab renderer class:
tabBar.tabRecycler = DisplayObjectRecycler.withClass(ToggleButton);1.0.0
.tabRecyclerIDFunction:(state:TabBarItemState) ‑> String
When a tab bar requires multiple tab styles, this function is used to
determine which style of tab is required for a specific item. Returns
the ID of the tab recycler to use for the item, or null if the default
tabRecycler should be used.
The following example provides an tabRecyclerIDFunction:
var regularTabRecycler = DisplayObjectRecycler.withClass(ToggleButton);
var firstTabRecycler = DisplayObjectRecycler.withClass(MyCustomToggleButton);
tabBar.setTabRecycler("regular-tab", regularTabRecycler);
tabBar.setTabRecycler("first-tab", firstTabRecycler);
tabBar.tabRecyclerIDFunction = function(state:TabBarItemState):String {
if(state.index == 0) {
return "first-tab";
}
return "regular-tab";
};1.0.0
.See also:
`TabBar.tabRecycler
Methods
getTabRecycler(id:String):DisplayObjectRecycler<Dynamic, TabBarItemState, ToggleButton>
Returns the tab recycler associated with a specific ID. Returns null
if no recycler is associated with the ID.
1.0.0
.See also:
indexToTab(index:Int):ToggleButton
Returns the current tab used to render the item at the specified index
in the data provider. May return null if an item doesn't currently
have a tab.
1.0.0
.dynamicitemToEnabled(data:Dynamic):Bool
Determines if a tab should be enabled or disabled. By default, all
items are enabled, unless the TabBar is disabled. This method
may be replaced to provide a custom value for enabled.
For example, consider the following item:
{ text: "Example Item", disable: true }If the TabBar should disable an item if the disable field is
true, a custom implementation of itemToEnabled() might look like
this:
tabBar.itemToEnabled = (item:Dynamic) -> {
return !item.disable;
};1.2.0
.itemToItemState(item:Dynamic):TabBarItemState
Returns a TabBarItemState representing a specific item.
1.3.0
.itemToTab(item:Dynamic):ToggleButton
Returns the current tab used to render a specific item from the data
provider. May return null if an item doesn't currently have a tab.
1.0.0
.dynamicitemToText(data:Dynamic):String
Converts an item to text to display within tab bar. By default, the
toString() method is called to convert an item to text. This method
may be replaced to provide custom text.
For example, consider the following item:
{ text: "Example Item" }If the TabBar should display the text "Example Item", a custom
implementation of itemToText() might look like this:
tabBar.itemToText = (item:Dynamic) -> {
return item.text;
};1.0.0
.setTabRecycler(id:String, recycler:AbstractDisplayObjectRecycler<Dynamic, TabBarItemState, ToggleButton>):Void
Associates an tab recycler with an ID to allow multiple types
of tabs to be displayed in the tab bar. A custom tabRecyclerIDFunction
may be specified to return the ID of the recycler to use for a specific
item in the data provider.
To clear a recycler, pass in null as the value.
1.0.0
.See also: