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