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

Import this type with “const {TabFolder} = require('tabris');”

Android

iOS

Properties

paging

iOSAndroid

Type: boolean

Enables swiping through tabs. Always enabled on Windows.

selection

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.This property can only be set on widget creation. Once set, it cannot be changed anymore.

tabMode

Android

Type: string, supported values: fixed, scrollable, default: fixed

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.This property can only be set on widget creation. Once set, it cannot be changed anymore.

Events

pagingChanged

Event Parameters

scroll

iOSAndroid

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.

Event Parameters

target: this
The widget the event was fired on.

offset: number
Number of pixels the current tab has scrolled horizontally.

win_tabBarThemeChanged

Event Parameters

Example

const{Tab,TabFolder,TextView,ui}=require('tabris');// Create a swipe enabled tab folder with 3 tabslettabFolder=newTabFolder({left:0,top:0,right:0,bottom:0,paging:true// enables swiping. To still be able to open the developer console in iOS, swipe from the bottom right.}).appendTo(ui.contentView);createTab('Cart','images/cart.png','images/cart-filled.png');createTab('Pay','images/card.png','images/card-filled.png');createTab('Statistic','images/chart.png','images/chart-filled.png');tabFolder.on('selectionChanged',({value:tab})=>console.log(tab.title));functioncreateTab(title,image,seletedImage){lettab=newTab({title:title,// converted to upper-case on Androidimage:{src:image,scale:2},selectedImage:{src:seletedImage,scale:2}}).appendTo(tabFolder);newTextView({centerX:0,centerY:0,text:'Content of Tab '+title}).appendTo(tab);}