• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# tabs
2
3> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
4> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
5
6tab页签容器。
7
8## 权限列表
9
10无
11
12
13## 子组件
14
15仅支持<[tab-bar](../arkui-js/js-components-container-tab-bar.md)>和<[tab-content](../arkui-js/js-components-container-tab-content.md)>。
16
17
18## 属性
19
20除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
21
22| 名称 | 类型 | 默认值 | 必填 | 描述 |
23| -------- | -------- | -------- | -------- | -------- |
24| index | number | 0 | 否 | 当前处于激活态的tab索引。 |
25| vertical | boolean | false | 否 | 是否为纵向的tab，默认为false，可选值为：<br/>-&nbsp;false：tabbar和tabcontent上下排列。<br/>-&nbsp;true：tabbar和tabcontent左右排列。 |
26
27
28## 样式
29
30支持[通用样式](../arkui-js/js-components-common-styles.md)。
31
32
33## 事件
34
35除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
36
37| 名称 | 参数 | 描述 |
38| -------- | -------- | -------- |
39| change | {&nbsp;index:&nbsp;indexValue&nbsp;} | tab页签切换后触发。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;动态修改index值不会触发该回调。 |
40
41
42## 示例
43
44```
45<!-- xxx.hml -->
46<div class="container">
47  <tabs class = "tabs" index="0" vertical="false" onchange="change">
48    <tab-bar class="tab-bar" mode="fixed">
49      <text class="tab-text">Home</text>
50      <text class="tab-text">Index</text>
51      <text class="tab-text">Detail</text>
52    </tab-bar>
53    <tab-content class="tabcontent" scrollable="true">
54      <div class="item-content" >
55        <text class="item-title">First screen</text>
56      </div>
57      <div class="item-content" >
58        <text class="item-title">Second screen</text>
59      </div>
60      <div class="item-content" >
61        <text class="item-title">Third screen</text>
62      </div>
63    </tab-content>
64  </tabs>
65</div>
66```
67
68```
69/* xxx.css */
70.container {
71  flex-direction: column;
72  justify-content: flex-start;
73  align-items: center;
74}
75.tabs {
76  width: 100%;
77}
78.tabcontent {
79  width: 100%;
80  height: 80%;
81  justify-content: center;
82}
83.item-content {
84  height: 100%;
85  justify-content: center;
86}
87.item-title {
88  font-size: 60px;
89}
90.tab-bar {
91  margin: 10px;
92  height: 60px;
93  border-color: #007dff;
94  border-width: 1px;
95}
96.tab-text {
97  width: 300px;
98  text-align: center;
99}
100```
101
102```
103// xxx.js
104export default {
105  change: function(e) {
106    console.log("Tab index: " + e.index);
107  },
108}
109```
110
111![zh-cn_image_0000001127125116](figures/zh-cn_image_0000001127125116.gif)
112