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

Name Type Description
items Array<TabContentItem> Gets or sets the items of the BottomNavigation.
selectedIndex number Gets or sets the selectedIndex of the BottomNavigation.
swipeEnabled boolean Gets or sets the swipe enabled state of the Tabs.
offscreenTabLimit number Gets or sets the number of offscreen preloaded tabs of the Tabs.
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
iOSTabBarItemsAlignment "leading", "justified", "center", "centerSelected" iOS Only: Gets or set the MDCTabBarAlignment of the tab bar icons in iOS. Default value: justified

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 Color Gets or sets the underline color of the selected TabStripItem.
selectedItemColor Color Gets or sets the color of the selected items in the tab strip.
unSelectedItemColor Color Gets or sets the color of the non-selected items in the tab strip.

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://). Note: To be used for programmatic creation of Tabs
iconClass string Gets or sets the CSS class name of the icon in the tab strip entry. Note: To be used for programmatic creation of Tabs

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 MDCTabBar