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