Class “TabFolder”
Object > NativeObject > Widget > Composite > TabFolder
A widget that can switch between tabs. Only children of type Tab are supported. Since the TabFolder does not compute its own size, the width and height must be defined by the respective layout properties (e.g. either width or left and right must be specified).
| Type: | TabFolder<TabType> extends Composite<TabType> |
| Generics: | TabType: The common widget class of the children this TabFolder can contain. Must be a subclass of Tab and defaults to Tab. |
| Constructor: | public |
| Singleton: | No |
| Namespace: | tabris |
| Direct subclasses: | None |
| JSX Support: | Element: <TabFolder/>Parent Elements: <Canvas/>, <Cell/>, <Composite/>, <Page/>, <RefreshComposite/>, <Row/>, <ScrollView/>, <Stack/>, <Tab/>Child Elements: <Tab/> |
Examples
JavaScript
import {Tab, TabFolder, contentView} from 'tabris';
new TabFolder({left: 0, top: 0, right: 0, bottom: 0})
.append(new Tab({title: 'Albums'}))
.append(new Tab({title: 'Artists'}))
.onSelect(({selection}) => console.log(`Tab changed to ${selection}`))
.appendTo(contentView);
See also:
JSX Creating a TabFolder containing a set of tabs [► Run in Playground]
JS tabfolder-swipe-parallax.js [► Run in Playground]
JSX tabfolder-swipe.jsx [► Run in Playground]
Constructor
new TabFolder(properties?)
| Parameter | Type | Description |
|---|---|---|
| properties | Properties<TabFolder> |
Sets all key-value pairs in the properties object as widget properties. Optional. |
Properties
paging
Enables swiping through tabs.
| Type: | boolean |
| Settable: | Yes |
| Change Event: | pagingChanged |
selectedTabIndicatorTintColor
The color used for the indicator of the selected tab. Only applies when the tabBarLocation is top. Available on Android and iOS 13+.
| Type: | ColorValue |
| Settable: | Yes |
| Change Event: | selectedTabIndicatorTintColorChanged |
selectedTabTintColor
The color used for the text and icon of a selected tab.
| Type: | ColorValue |
| Settable: | Yes |
| Change Event: | selectedTabTintColorChanged |
selection
The currently selected tab.
| Type: | TabType |
| Settable: | Yes |
| Change Event: | selectionChanged |
selectionIndex
The index of the currently selected tab.
| Type: | number |
| Settable: | Yes |
| Change Event: | selectionIndexChanged |
tabBarBackground
The color used for the background of the bar containing the tabs.
| Type: | ColorValue |
| Settable: | Yes |
| Change Event: | tabBarBackgroundChanged |
tabBarElevation
Android
The elevation of the tab bar. Depending on the tabBarLocation different defaults are applied.
| Type: | number |
| Settable: | Yes |
| Change Event: | tabBarElevationChanged |
tabBarLocation
The placement of the tab titles. When set to "hidden", the tab bar will not be visible. When set to "auto", the position is platform dependent.
| Type: | 'top' | 'bottom' | 'hidden' | 'auto' |
| Default: | 'auto' |
| Settable: | By Constructor or JSX |
| Change Event: | Not supported |
This property can only be set via constructor or JSX. Once set, it cannot change anymore.
tabMode
Android
Controls how the tabs make use of the available horizontal space. Setting the tabMode to "fixed" makes the tabs span the entire available space. In case of a very wide TabFolder the "fixed" mode centers the tabs. The mode "scrollable" left aligns the tabs and allows to scroll the tabs if there are more tabs than would fit in the available space. Available on Android only.
| Type: | 'fixed' | 'scrollable' |
| Default: | 'fixed' |
| Settable: | By Constructor or JSX |
| Change Event: | Not supported |
This property can only be set via constructor or JSX. Once set, it cannot change anymore.
tabTintColor
The color used for the text and icon of a tab.
When the tabBarLocation is top on iOS, this property affects the entire appearance of the bar. No other color properties have an effect in that configuration.
| Type: | ColorValue |
| Settable: | Yes |
| Change Event: | tabTintColorChanged |
Events
select
Fired when the user taps on a tab. The event also fires when the same tab is tapped multiple times.
EventObject Type: TabFolderSelectEvent<TabFolder>
| Property | Type | Description |
|---|---|---|
| selection | Tab |
The Tap selected by the user. |
scroll
Fired when paging is enabled and a tab is scrolled. The event parameter contains position information relative to the currently selected Tab. Eg.: scrolling a 500px wide tab 10% to the left sets offset to 50. Scrolling 10% to the right sets offset to -50.
EventObject Type: TabFolderScrollEvent<TabFolder>
| Property | Type | Description |
|---|---|---|
| offset | number |
Number of pixels the current tab has scrolled horizontally. |
| selection | Tab |
The current value of the selection property. |
Change Events
pagingChanged
Fired when the paging property has changed.
EventObject Type: PropertyChangedEvent<TabFolder, boolean>
| Property | Type | Description |
|---|---|---|
| value | boolean |
The new value of paging. |
selectionChanged
Fired when the selection property has changed.
EventObject Type: PropertyChangedEvent<TabFolder, TabType>
| Property | Type | Description |
|---|---|---|
| value | TabType |
The new value of selection. |
selectionIndexChanged
Fired when the selectionIndex property has changed.
EventObject Type: PropertyChangedEvent<TabFolder, number>
| Property | Type | Description |
|---|---|---|
| value | number |
The new value of selectionIndex. |
tabTintColorChanged
Fired when the tabTintColor property has changed.
EventObject Type: PropertyChangedEvent<TabFolder, ColorValue>
| Property | Type | Description |
|---|---|---|
| value | ColorValue |
The new value of tabTintColor. |
selectedTabTintColorChanged
Fired when the selectedTabTintColor property has changed.
EventObject Type: PropertyChangedEvent<TabFolder, ColorValue>
| Property | Type | Description |
|---|---|---|
| value | ColorValue |
The new value of selectedTabTintColor. |
tabBarBackgroundChanged
Fired when the tabBarBackground property has changed.
EventObject Type: PropertyChangedEvent<TabFolder, ColorValue>
| Property | Type | Description |
|---|---|---|
| value | ColorValue |
The new value of tabBarBackground. |
selectedTabIndicatorTintColorChanged
Fired when the selectedTabIndicatorTintColor property has changed.
EventObject Type: PropertyChangedEvent<TabFolder, ColorValue>
| Property | Type | Description |
|---|---|---|
| value | ColorValue |
The new value of selectedTabIndicatorTintColor. |
tabBarElevationChanged
Fired when the tabBarElevation property has changed.
EventObject Type: PropertyChangedEvent<TabFolder, number>
| Property | Type | Description |
|---|---|---|
| value | number |
The new value of tabBarElevation. |
