NativeScript Core

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