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)
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://" class="fas"></Image>
</TabStripItem>
<TabStripItem class="special">
<Label text="Account"></Label>
<Image src="font://" class="fas"></Image>
</TabStripItem>
<TabStripItem class="special">
<Label text="Search"></Label>
<Image src="font://" 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
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
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
|
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. |
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. |
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. |
Name |
Description |
itemTap |
Emitted when a TabStripItem is tapped. |
Name |
Description |
tap |
Emitted when a TabStripItem is tapped. |