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> - навигационный компонент, отображающий контент, сгруппированный по вкладкам и позволяющий пользователю переключиться между ними.


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

Примечание: В данный момент TabViewItem ожидает один дочерний элемент. В большинстве случаев вы можете обернуть ваш контент в макет.

Добавление иконок во вкладки

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

Примечание: шрифты иконок могут работать в некоторых случаях, но в основном рекомендуется использовать изображения в качестве иконок для вкладок.

Свойства

ИмяТипОписание
selectedIndexNumberПолучает или задает выбранную вкладку. Значение по умолчанию 0.
tabTextColorColor(Свойство стиля)Получает или задает значение цвета текста заголовков вкладок.
tabBackgroundColorColor(Свойство стиля)Получает или задает значение цвета фона для вкладок.
selectedTabTextColorColor(Свойство стиля)Получает или задает значение цвета текста закголовка выбранной вкладки.

События

ИмяОписание
selectedIndexChangeСрабатывает при нажатии на один из компонентов <TabViewItem>.

Нативный компонент

AndroidiOS
android.support.v4.view.ViewPagerUITabBarController
Contributors