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

Dynamic Creation

To create a Tabs component programatically, we need to use special properties for creating each TabStripItem. Those properties are title, iconSource and iconClass (that are used to create the coresponding Label and Image).

let tabs = new Tabs();
let tabStrip = new TabStrip();

let tabStripItem1 = new TabStripItem();
tabStripItem1.title = "Tab 1";
tabStripItem1.iconSource = "font://" + String.fromCharCode(charCode1);
tabStripItem1.iconClass = "far"; // e.g., FontAвесоме

let tabStripItem2 = new TabStripItem();
tabStripItem2.title = "Tab 2";
tabStripItem2.iconSource = "font://" + String.fromCharCode(charCode2);
tabStripItem2.iconClass = "far"; // e.g., FontAвесоме

let tabStripItems = [tabStripItem1, tabStripItem2];
tabStrip.items = tabStripItems;

let contentItems = [conterntItem1, contentItem2]; // where contentItem1 and 2 are the layouts/frames that holds the actual content

tabs.tabStrip = tabStrip;
tabs.items = contentItems;

let stack = new StackLayout(); // the ""simple rule
stack.addChild(tabs)
somePage.content = stack; // base example for adding the newly created Tabs to the current page

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.

The main styling options are introduced with three specific properties that should be set on the TabStrip component.

• selectedItemnColor: Sets the text color of the selected tab strip item. Also sets the color of the tab strip icon when the icon is an icon font (font://).
• unSelectedItemColor: Sets the text color of the unselected tab strip items. Also sets the color of the tab strip icon when the icon is an icon font (font://).
• highlightColor: Sets the color of the underline for the selected tab strip item.

Those properties can be set dynamically, inline and via CSS.

TabStrip {
    selected-item-color: blueviolet;
    un-selected-item-color: brown;
    highlight-color: gold;
}

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

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. Those properties can be set inline or via CSS.

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

Improve this document

Demo Source

Properties

Tabs Properties

TabStrip Properties

TabStripItem Properties

Events

Tabs Events

TabStrip Events

TabStripItem Events

API References

Native Component