Tabs

The Tabs component provides a simple way to navigate between different views while providing common UI for both iOS and Android platforms. The recommended scenario suitable for Tabs is a mid level navigation. For additional information and details about bottom navigation refer to the Material Design guidelines.

The Tabs component roundup

Semantic: Mid Level Navigation
Usage: Unlimited Tabs with common function
Transitions: Slide Transition indicating the relative position to each other
Gestures: Swipe Gesture
Preloading: At least 1 to the sides (because of the swipe gesture)

Usage

The Tabs component contains two sub-components:

The TabStrip which defines and rendres the bottom bar and its TabStripItem components.
Multiple TabContentItem components which total number should be equal to the number of the tabs (TabStripItem components). Each TabContentItem acts as a container for your tab content.

<Tabs selectedIndex="1">

    <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
    <TabStrip>
        <TabStripItem>
            <Label text="Home"></Label>
            <Image src="font://&#xf015;" class="fas"></Image>
        </TabStripItem>
        <TabStripItem class="special">
            <Label text="Account"></Label>
            <Image src="font://&#xf007;" class="fas"></Image>
        </TabStripItem>
        <TabStripItem class="special">
            <Label text="Search"></Label>
            <Image src="font://&#xf00e;" class="fas"></Image>
        </TabStripItem>
    </TabStrip>

    <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
    <TabContentItem>
        <GridLayout>
            <Label text="Home Page" class="h2 text-center"></Label>
        </GridLayout>
    </TabContentItem>
    <TabContentItem>
        <GridLayout>
            <Label text="Account Page" class="h2 text-center"></Label>
        </GridLayout>
    </TabContentItem>
    <TabContentItem>
        <GridLayout>
            <Label text="Search Page" class="h2 text-center"></Label>
        </GridLayout>
    </TabContentItem>

</Tabs>

Note: The number of TabStripItem components must be equal to the number of tabContentItem components.

Improve this document

Demo Source

Styling

Note: - The integration with nativescript-theme and the support for custom CSS is currently under development and is on its way.

Tabs.bottom-nav {
    background-color: orangered;
    color: gold;
    font-size: 24;
}

TabStripItem.tabstripitem-active {
    background-color: teal;
}

TabStripItem.tabstripitem-active:active {
    background-color: yellowgreen;
} 

TabContentItem.first-tabcontent {
    background-color: seashell;
    color: olive;
}
TabContentItem.second-tabcontent {
    background-color: slategray;
    color: aquamarine;
}
TabContentItem.third-tabcontent {
    background-color: blueviolet;
    color: antiquewhite;
}
Tabs TabStrip{
    highlight-color: red;
}

Note: Currently, we can set only the backgroundColor, color, fontFamily, fontSize, fontStyle, fontWeight and textTransform styling properties to the Label and Image components inside the TabStripItem. More about the usage of those properties can be found in the Styling article.

Note: On iOS, the TabStripItems can not be stylied individually.

Improve this document

Demo Source

Properties

Tabs Properties

Name	Type	Description
`items`	`Array<TabContentItem>`	Gets or sets the items of the BottomNavigation.
`selectedIndex`	`number`	Gets or sets the selectedIndex of the BottomNavigation.
`tabStrip`	`TabStrip`	Gets or sets the tab strip of the BottomNavigation.
`tabsPosition`	"top", "bottom"	Gets or sets the position state of the Tabs. Default value: top

TabStrip Properties

Name	Type	Description
`iosIconRenderingMode`	"automatic", "alwaysOriginal", "alwaysTemplate"	Gets or sets the icon rendering mode on iOS.
`isIconSizeFixed`	`boolean`	When set to `true` the icon will have fixed size following the platform-specific design guidelines. Default value: `true`.
`items`	`Array<TabStripItem>`	Gets or sets an array of strip items of the TabStrip.
`highlightColor`		Gets or sets the underline color of the selected TabStripItem.

TabStripItem Properties

Name	Type	Description
`title`	`string`	Gets or sets the title of the tab strip entry.
`iconSource`	`string`	Gets or sets the icon source of the tab strip entry. Supports local image paths (`~`), resource images (`res://`) and icon fonts (`font://`)
`image`	`Image`	Gets or sets the image of the tab strip entry.
`label`	`Label`	Gets or sets the label of the tab strip entry.

Events

Tabs Events

Name	Description
`selectedIndexChanged`	Emitted when the `selectedIndex` property is changed.
`loaded`	Emitted when the view is loaded.
`unloaded`	Emitted when the view is unloaded.
`layoutChanged`	Emitted when the layout bounds of a view changes due to layout processing.

TabStrip Events

Name	Description
`itemTap`	Emitted when a `TabStripItem` is tapped.

TabStripItem Events

Name	Description
`tap`	Emitted when a `TabStripItem` is tapped.

API References

Name	Type
Tabs	`Class`
TabStrip	`Class`
TabStripItem	`Class`
TabContentItem	`Class`

Native Component

Android	iOS
FrameLayout	UITabViewController

NativeScript Core