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).
| TypeScript type | TabFolder<ChildType extends Tab = Tab> extends Composite<ChildType> |
| Constructor | public |
| Singleton | No |
| Namespace | tabris |
| Direct subclasses | None |
| JSX support | Element: <TabFolder/>Parent element: <Composite/> and any widget extending CompositeChild elements: <ChildType/>Text content: Not supported |
Example
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
JS tabfolder-swipe-parallax.js
JSX tabfolder-swipe.jsx
Constructor
new TabFolder(properties?)
| Parameter | Type | Optional | Description |
|---|---|---|---|
| properties | Properties<TabFolder> |
Yes | Sets all key-value pairs in the properties object as widget properties. |
Properties
paging
Enables swiping through tabs.
| Type | boolean |
| Settable | Yes |
| Change events | Yes |
selectedTabIndicatorTintColor
Android
The color used for the underline strip of the selected tab. Only applies on Android when the tabBarLocation is top.
| Type | ColorValue |
| Settable | Yes |
| Change events | Yes |
selectedTabTintColor
The color used for the text and icon of a selected tab.
| Type | ColorValue |
| Settable | Yes |
| Change events | Yes |
selection
The currently selected tab.
| Type | Tab |
| Settable | Yes |
| Change events | Yes |
selectionIndex
The index of the currently selected tab.
| Type | number |
| Settable | Yes |
| Change events | Yes |
tabBarBackground
The color used for the background of the bar containing the tabs.
| Type | ColorValue |
| Settable | Yes |
| Change events | Yes |
tabBarElevation
Android
The elevation of the tab bar. Depending on the tabBarLocation different defaults are applied.
| Type | number |
| Settable | Yes |
| Change events | Yes |
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 | On creation |
| Change events | No |
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 | On creation |
| Change events | No |
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 events | Yes |
Events
select
Fired when the user taps on a tab. The event also fires when the same tab is tapped multiple times.
| Parameter | 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.
| Parameter | 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.
| Parameter | Type | Description |
|---|---|---|
| value | boolean |
The new value of paging. |
selectionChanged
Fired when the selection property has changed.
| Parameter | Type | Description |
|---|---|---|
| value | Tab |
The new value of selection. |
selectionIndexChanged
Fired when the selectionIndex property has changed.
| Parameter | Type | Description |
|---|---|---|
| value | number |
The new value of selectionIndex. |
tabTintColorChanged
Fired when the tabTintColor property has changed.
| Parameter | Type | Description |
|---|---|---|
| value | ColorValue |
The new value of tabTintColor. |
selectedTabTintColorChanged
Fired when the selectedTabTintColor property has changed.
| Parameter | Type | Description |
|---|---|---|
| value | ColorValue |
The new value of selectedTabTintColor. |
tabBarBackgroundChanged
Fired when the tabBarBackground property has changed.
| Parameter | Type | Description |
|---|---|---|
| value | ColorValue |
The new value of tabBarBackground. |
selectedTabIndicatorTintColorChanged
Fired when the selectedTabIndicatorTintColor property has changed.
| Parameter | Type | Description |
|---|---|---|
| value | ColorValue |
The new value of selectedTabIndicatorTintColor. |
tabBarElevationChanged
Fired when the tabBarElevation property has changed.
| Parameter | Type | Description |
|---|---|---|
| value | number |
The new value of tabBarElevation. |
