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
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 Composite
Child 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.