Tabs | NativeScript-Vue-Examples

该 Tabs 组件提供了一种在不同视图之间导航的简单方法，同时为 iOS 和 Android 平台提供了通用的 UI。推荐适合的方案 Tabs 是中级导航。有关底部导航的更多信息和详细信息，请参考《材料设计指南》 (opens new window)。

该 Tabs 组件综述

语义：中级导航
用法：具有通用功能的无限选项卡
过渡：滑动过渡，指示彼此的相对位置
手势：滑动手势
预载：至少 1 边（由于滑动手势）

# 用法

该 Tabs 组件包含两个子组件：

在 TabStrip 其定义并呈现底杆和它的 TabStripItem 部件。
多个 TabContentItem 组件，总数应等于选项卡的数量（TabStripItem 组件）。每个都 TabContentItem 充当标签内容的容器。

<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://&#xf015;" class="fas"></Image>
        </TabStripItem>
        <TabStripItem class="special">
            <Label text="Account"></Label>
            <Image src="font://&#xf007;" class="fas"></Image>
        </TabStripItem>
        <TabStripItem class="special">
            <Label text="Search"></Label>
            <Image src="font://&#xf00e;" 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>

WARNING

注意：TabStripItem 组件数必须等于 tabContentItem 组件数。

# 造型

TIP

注意： -与 nativescript-theme 自定义 CSS 的集成和支持目前正在开发中，并且正在开发中。

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

TIP

注：目前，我们可以设置止 backgroundColor，color，fontFamily，fontSize，fontStyle，fontWeight 和 textTransform 样式属性的 Label 和 Image 组件 TabStripItem 内。有关这些属性的用法的更多信息，请参见样式文章。

注意：在 iOS 上，不能单独对 TabStripItems 进行样式化。

# 性质

# 标签属性

名称	类型	描述
items	`Array<TabContentItem>`	获取或设置 BottomNavigation 的项目。
selectedIndex	number	获取或设置 BottomNavigation 的 selectedIndex。
tabStrip	TabStrip	获取或设置 BottomNavigation 的标签栏。
tabsPosition	“顶部”，“底部”	获取或设置选项卡的位置状态。默认值：top

# TabStrip 属性

名称	类型	描述
iosIconRenderingMode	“自动”，“总是原始”，“总是模板”	获取或设置 iOS 上的图标渲染模式。
isIconSizeFixed	boolean	设置为 true 图标时，将遵循特定于平台的设计准则来固定大小。默认值：true。
items	`Array<TabStripItem>`	获取或设置 TabStrip 的带状项目的数组。
highlightColor		获取或设置所选 TabStripItem 的下划线颜色。

# TabStripItem 属性

名称	类型	描述
title	string	获取或设置标签栏条目的标题。
iconSource	string	获取或设置标签栏条目的图标源。支持本地图像路径（~），资源图像（res://）和图标字体（font://）
image	Image	获取或设置标签栏条目的图像。
label	Label	获取或设置标签条条目的标签。

# 大事记

# 标签事件

名称	描述
selectedIndexChanged	selectedIndex 更改属性时发出。
loaded	加载视图时发出。
unloaded	卸载视图时发出。
layoutChanged	当视图的布局边界由于布局处理而改变时发出。

# TabStrip 事件

名称	描述
itemTap	TabStripItem 轻按 a 时发出。

# TabStripItem 事件

名称	描述
tap	TabStripItem 轻按 a 时发出。

# API 参考

名称	类型
标签 (opens new window)	Class
标签条 (opens new window)	Class
TabStripItem (opens new window)	Class
TabContentItem (opens new window)	Class

# 本机组件

安卓系统	的 IOS
框架布局 (opens new window)	UITabViewController (opens new window)

← BottomNavigation TabView →