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 | 否 | BarPosition.Start | 指定页签位置来创建Tabs容器组件。 | 24| index | number | 否 | 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 38| 名称 | 参数类型 | 默认值 | 描述 | 39| ----------------- | ------- | --------------------------- | ------------------------------- | 40| vertical | boolean | false | 设置为false是为横向Tabs，设置为true时为纵向Tabs。 | 41| scrollable | boolean | true | 设置为true时可以通过滑动页面进行页面切换，为false时不可滑动切换页面。 | 42| barMode | BarMode | BarMode.Fixed | TabBar布局模式，具体描述见BarMode枚举说明。 | 43| barWidth | [Length](ts-types.md#length) | - | TabBar的宽度值。 | 44| barHeight | [Length](ts-types.md#length) | - | TabBar的高度值。 | 45| animationDuration | number | 200 | TabContent滑动动画时长。 | 46 47## BarMode枚举说明 48 49| 名称 | 描述 | 50| ---------- | ------------------------------- | 51| Scrollable | TabBar使用实际布局宽度, 超过总长度后可滑动。 | 52| Fixed | 所有TabBar平均分配宽度。 | 53 54## 事件 55 56| 名称 | 功能描述 | 57| ------------------------------------------------------------ | -------------------------------------------------------- | 58| onChange(event: (index: number) => void) | Tab页签切换后触发的事件。<br/>- index: tab标签的索引值。 | 59 60## TabsController 61 62Tabs组件的控制器，用于控制Tabs组件进行页签切换。 63 64### 导入对象 65 66``` 67controller: TabsController = new TabsController() 68``` 69 70### changeIndex 71 72changeIndex(value: number): void 73 74控制Tabs切换到指定页签。 75 76**参数：** 77 78| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 79| ------ | -------- | ---- | ------ | ------------------------------------- | 80| value | number | 是 | - | 页签在Tabs里的索引值，索引值从0开始。 | 81 82## 示例 83 84```ts 85// xxx.ets 86@Entry 87@Component 88struct TabsExample { 89 private controller: TabsController = new TabsController() 90 91 build() { 92 Column() { 93 Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { 94 TabContent() { 95 Column().width('100%').height('100%').backgroundColor(Color.Pink) 96 }.tabBar('pink') 97 98 TabContent() { 99 Column().width('100%').height('100%').backgroundColor(Color.Yellow) 100 }.tabBar('yellow') 101 102 TabContent() { 103 Column().width('100%').height('100%').backgroundColor(Color.Blue) 104 }.tabBar('blue') 105 106 TabContent() { 107 Column().width('100%').height('100%').backgroundColor(Color.Green) 108 }.tabBar('green') 109 } 110 .vertical(true).scrollable(true).barMode(BarMode.Fixed) 111 .barWidth(70).barHeight(150).animationDuration(400) 112 .onChange((index: number) => { 113 console.info(index.toString()) 114 }) 115 .width('90%').backgroundColor(0xF5F5F5) 116 }.width('100%').height(150).margin({ top: 5 }) 117 } 118} 119``` 120 121 122
