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 itsTabStripItem
components. -
Multiple
TabContentItem
components which total number should be equal to the number of the tabs (TabStripItem
components). EachTabContentItem
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 oftabContentItem
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
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
andtextTransform
styling properties to theLabel
andImage
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.
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 |