NativeScript-Vue 2.0: Back to the Vueture (Webinar) is now on YouTube
TabView

This is an overview of the most common usage of TabView. For more information about the available properties, methods, or events, head over to the complete API documentation for TabView.

<TabView> is a navigation component that shows content grouped into tabs and lets users switch between tabs.


<TabView :selectedIndex="selectedIndex">
  <TabViewItem title="Tab 1">
    <Label text="Content for Tab 1" />
  </TabViewItem>
  <TabViewItem title="Tab 2">
    <Label text="Content for Tab 2" />
  </TabViewItem>
</TabView>

NOTE: Currently, TabViewItem expects a single child element. In most cases, you might want to wrap your content in a layout.

Adding icons to tabs

<TabView :selectedIndex="selectedIndex" iosIconRenderingMode="alwaysOriginal">
  <TabViewItem title="Tab 1" iconSource="~/images/icon.png">
    <Label text="Content for Tab 1" />
  </TabViewItem>
  <TabViewItem title="Tab 2" iconSource="~/images/icon.png">
    <Label text="Content for Tab 2" />
  </TabViewItem>
</TabView>

NOTE: Use images for tab icons instead of icon fonts.

Props

NameTypeDescription
selectedIndexNumberGets or sets the currently selected tab. Default is 0.
tabTextColorColor(Style property) Gets or sets the text color of the tabs titles.
tabBackgroundColorColor(Style property) Gets or sets the background color of the tabs.
selectedTabTextColorColor(Style property) Gets or sets the text color of the selected tab title.
androidTabsPositionStringSets the position of the TabView in Android platform
Valid values: top or bottom.

Events

NameDescription
selectedIndexChangeEmits an event object containing a value property with the index of the tapped <TabViewItem>.

Native component

AndroidiOS
android.support.v4.view.ViewPagerUITabBarController
Contributors