Tab Layout

Overview

A Tab Layout is a swipeable visible component where you can add tabs. It provides horizontal layout to display tabs on the screen.



Tab Layout

A demo of Tab Layout.

Properties

Get Current Tab

Get Current Tab

( Getter only ) Type: Text

Returns the current selected tab.

Select Tab

Select Tab

( Setter only ) Type: Text

Selects a tab which is then the active tab.

Tabs Active Text Colour

Tabs Active Text Colour

( Getter + Setter ) Type: Colour

Determines text's colour of the current active tab.

Tabs Background Colour

Tabs Background Colour

( Getter + Setter ) Type: Colour

Determines background colour of tabs.

Tabs Indicator Colour

Tabs Indicator Colour

( Getter + Setter ) Type: Colour

Determines indicator colour of the tabs.

Tabs Mode

Tabs Mode

( Getter + Setter ) Type: Number

Determines the mode of the tabs. If no mode is set, 'scrollable' is set as default. Use '0' for 'Scrollable and '1' for 'Fixed'.

Tabs Text Colour

Tabs Text Colour

( Getter + Setter ) Type: Colour

Determines text's colour of not selected tab.

Visible

Visible

( Getter + Setter ) Type: Boolean

Determines wheather the tabs are visible on the screen or not.

Width

Width

( Getter + Setter ) Type: Number

Determines the width with which the tabs are displayed.

Width Percent

Width Percent

( Setter only ) Type: Number

Determines the width with which the tabs are displayed in terms of precentage of the whole screen width.

Methods

Add New Tab

Add New Tab

( Text name, Text icon)

Adds a new tab to the Tab Layout.

Params
name Text: The name of the tab.
icon Text: The name of the image that you want to set as icon of the tab. Leave blank if you don't want an icon.

Note

The image that you want to set as the icon of a tab must be uploaded to the assets.

Add New Tab At

Add New Tab At

( Text name, Text icon, Number position)

Adds a new tab to the Tab Layout at the given position.

Params
name Text: The name of the tab.
icon Text: The name of the image that you want to set as icon of the tab. Leave blank if you don't want an icon.
position Number: The position of the tab. For example, 3.

Count Tabs

Count Tabs

(None)

Returns the number of current added tabs.

Remove All Tabs

Remove All Tabs

(None)

Removes all the tabs from Tab Layout.

Remove Tab At

Remove Tab At

( Number position)

Removes the given tab the tabs from Tab Layout.

Params
position Number: The position of the tab. For example, 3.

Events

Tab Item Selected

Tab Item Selected

( Text tab, Number position)

Indicates that a item in Tab Layout is selected.

Params
tab Text: The name of the tab.
position Number: The position of the tab. For example, 3.