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

TabFolder on Android
Android
TabFolder on iOS
iOS
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.