1# Tabs 2 3通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12仅可包含子组件[TabContent](ts-container-tabcontent.md)。 13 14 15## 接口 16 17Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: [TabsController](#tabscontroller)}) 18 19**参数：** 20 21| 参数名 | 参数类型 | 必填 | 参数描述 | 22| ----------- | --------------------------------- | ---- | ---------------------------------------- | 23| barPosition | BarPosition | 否 | 设置Tabs的页签位置。<br/>默认值：BarPosition.Start | 24| index | number | 否 | 设置初始页签索引。<br/>默认值：0<br/>**说明：** <br/>设置为小于0的值时按默认值显示。<br/>可选值为[0, TabContent子节点数量-1]。<br/>设置不同值时，默认生效切换动效，可以设置animationDuration为0关闭动画。 | 25| controller | [TabsController](#tabscontroller) | 否 | 设置Tabs控制器。 | 26 27## BarPosition枚举说明 28 29| 名称 | 描述 | 30| ----- | ---------------------------------------- | 31| Start | vertical属性方法设置为true时，页签位于容器左侧；vertical属性方法设置为false时，页签位于容器顶部。 | 32| End | vertical属性方法设置为true时，页签位于容器右侧；vertical属性方法设置为false时，页签位于容器底部。 | 33 34 35## 属性 36 37除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 38 39| 名称 | 参数类型 | 描述 | 40| ----------------- | --------------------------------------- | ---------------------------------------- | 41| vertical | boolean | 设置为false是为横向Tabs，设置为true时为纵向Tabs。<br/>默认值：false | 42| scrollable | boolean | 设置为true时可以通过滑动页面进行页面切换，为false时不可滑动切换页面。<br/>默认值：true | 43| barMode | BarMode | TabBar布局模式，具体描述见BarMode枚举说明。<br/>默认值：BarMode.Fixed | 44| barWidth | number \| Length<sup>8+</sup> | TabBar的宽度值。<br/>**说明：** <br/>设置为小于0或大于Tabs宽度值时，按默认值显示。 | 45| barHeight | number \| Length<sup>8+</sup> | TabBar的高度值。<br/>**说明：** <br/>设置为小于0或大于Tabs宽度值时，按默认值显示。 | 46| animationDuration | number | TabContent滑动动画时长。不设置时，点击切换页签无动画，滑动切换有动画；设置时，点击切换和滑动切换都有动画。<br/>默认值：300<br/>**说明：** <br/>设置为小于0或百分比时，按默认值显示。 | 47 48## BarMode枚举说明 49 50| 名称 | 描述 | 51| ---------- | ---------------------------------------- | 52| Scrollable | 每一个TabBar均使用实际布局宽度，超过总长度（横向Tabs的barWidth，纵向Tabs的barHeight）后可滑动。 | 53| Fixed | 所有TabBar平均分配barWidth宽度（纵向时平均分配barHeight高度）。 | 54 55## 事件 56 57除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： 58 59| 名称 | 功能描述 | 60| ---------------------------------------- | ---------------------------------------- | 61| onChange(event: (index: number) => void) | Tab页签切换后触发的事件。<br>- index：当前显示的index索引，索引从0开始计算。<br/>触发该事件的条件：<br/>1、TabContent支持滑动时，组件触发滑动时触发。<br/>2、通过[控制器](#tabscontroller)API接口调用。<br/>3、通过[状态变量](../../quick-start/arkts-state.md)构造的属性值进行修改。<br/>4、通过页签处点击触发。 | 62 63## TabsController 64 65Tabs组件的控制器，用于控制Tabs组件进行页签切换。不支持一个TabsController控制多个Tabs组件。 66 67### 导入对象 68 69```ts 70controller: TabsController = new TabsController() 71``` 72 73### changeIndex 74 75changeIndex(value: number): void 76 77控制Tabs切换到指定页签。 78 79**参数：** 80 81| 参数名 | 参数类型 | 必填 | 参数描述 | 82| ----- | ------ | ---- | ---------------------------------------- | 83| value | number | 是 | 页签在Tabs里的索引值，索引值从0开始。<br/>**说明：** <br/>设置小于0或大于最大数量的值时，该事件失效。 | 84 85 86## 示例 87 88```ts 89// xxx.ets 90@Entry 91@Component 92struct TabsExample { 93 @State fontColor: string = '#182431' 94 @State selectedFontColor: string = '#007DFF' 95 @State currentIndex: number = 0 96 private controller: TabsController = new TabsController() 97 98 @Builder TabBuilder(index: number, name: string) { 99 Column() { 100 Text(name) 101 .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor) 102 .fontSize(16) 103 .fontWeight(this.currentIndex === index ? 500 : 400) 104 .lineHeight(22) 105 .margin({ top: 17, bottom: 7 }) 106 Divider() 107 .strokeWidth(2) 108 .color('#007DFF') 109 .opacity(this.currentIndex === index ? 1 : 0) 110 }.width('100%') 111 } 112 113 build() { 114 Column() { 115 Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { 116 TabContent() { 117 Column().width('100%').height('100%').backgroundColor('#00CB87') 118 }.tabBar(this.TabBuilder(0, 'green')) 119 120 TabContent() { 121 Column().width('100%').height('100%').backgroundColor('#007DFF') 122 }.tabBar(this.TabBuilder(1, 'blue')) 123 124 TabContent() { 125 Column().width('100%').height('100%').backgroundColor('#FFBF00') 126 }.tabBar(this.TabBuilder(2, 'yellow')) 127 128 TabContent() { 129 Column().width('100%').height('100%').backgroundColor('#E67C92') 130 }.tabBar(this.TabBuilder(3, 'pink')) 131 } 132 .vertical(false) 133 .barMode(BarMode.Fixed) 134 .barWidth(360) 135 .barHeight(56) 136 .animationDuration(400) 137 .onChange((index: number) => { 138 this.currentIndex = index 139 }) 140 .width(360) 141 .height(296) 142 .margin({ top: 52 }) 143 .backgroundColor('#F1F3F5') 144 }.width('100%') 145 } 146} 147``` 148 149
