TabViewItem
<tabViewItem>
is the view of a <tabView>
.
See also:
/** @jsx createElement */
import { SelectedIndexChangedEventData } from "tns-core-modules/ui/tab-view/tab-view";
<tabView
selectedIndex={selectedIndex}
onSelectedIndexChange={(args: SelectedIndexChangedEventData) => {
const { oldIndex, newIndex } = args;
console.log(`Changed from tab index ${oldIndex} -> ${newIndex}.`);
}}
>
<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
/** @jsx createElement */
<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: You can use images for tab icons instead of icon fonts. For more information about how to control the size of icons, see Working with image from resource folders.
Props
Name | Type | Description |
---|---|---|
selectedIndex | number | Sets the currently selected tab. Default is 0 . |
tabTextColor | Color | (Style property) Sets the text color of the tabs titles. |
tabBackgroundColor | Color | (Style property) Sets the background color of the tabs. |
selectedTabTextColor | Color | (Style property) Sets the text color of the selected tab title. |
androidTabsPosition | string | Sets the position of the TabView in Android platform Valid values: top or bottom . |
onSelectedIndexChange | (args: SelectedIndexChangedEventData_4 ) => void | Emitted when an item on the TabView is tapped. |
Native component
Android | iOS |
---|---|
android.support.v4.view.ViewPager | UITabBarController |