1# Tabs 2 3The **\<Tabs>** component is a container component that allows users to switch between content views through tabs. Each tab page corresponds to a content view. 4 5> **NOTE** 6> 7> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Only the [\<TabContent>](ts-container-tabcontent.md) child component is supported. 13 14 15## APIs 16 17Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: [TabsController](#tabscontroller)}) 18 19**Parameters** 20 21| Name | Type | Mandatory| Description | 22| ----------- | --------------------------------- | ---- | ------------------------------------------------------------ | 23| barPosition | BarPosition | No | Position of the **\<Tabs>** component.<br>Default value: **BarPosition.Start** | 24| index | number | No | Initial tab index.<br>Default value: **0**<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>The value ranges from 0 to the number of **\<TabContent>** subnodes minus 1.<br>When this parameter is set to different values, the slide animation for tab switching is enabled by default. To disable the animation, set **animationDuration** to **0**. | 25| controller | [TabsController](#tabscontroller) | No | Tab controller. | 26 27## BarPosition 28 29| Name | Description | 30| ----- | ---------------------------------------- | 31| Start | If the **vertical** attribute is set to **true**, the tab is on the left of the container. If the **vertical** attribute is set to **false**, the tab is on the top of the container.| 32| End | If the **vertical** attribute is set to **true**, the tab is on the right of the container. If the **vertical** attribute is set to **false**, the tab is at the bottom of the container.| 33 34 35## Attributes 36 37In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 38 39| Name | Type | Description | 40| ------------------------ | ---------------------------------------- | ---------------------------------------- | 41| vertical | boolean | Whether to use vertical tabs. The value **true** means to use vertical tabs, and **false** means to use horizontal tabs.<br>Default value: **false**| 42| scrollable | boolean | Whether the tabs are scrollable. The value **true** means that the tabs are scrollable, and **false** means the opposite.<br>Default value: **true**| 43| barMode | BarMode | Tab bar layout mode. For details, see **BarMode**.<br>Default value: **BarMode.Fixed**| 44| barWidth | number \| Length<sup>8+</sup> | Width of the tab bar.<br>The default value varies.<br>If the tab bar has the **vertical** attribute set to **false** and does not have a style specified, the default value is the width of the **\<Tabs>** component.<br>If the tab bar has the **vertical** attribute set to **true** and does not have a style specified, the default value is **56vp**.<br>If the tab bar has the **vertical** attribute set to **false** and **SubTabbarStyle** specified, the default value is the width of the **\<Tabs>** component.<br>If the tab bar has the **vertical** attribute set to **true** and **SubTabbarStyle** specified, the default value is **56vp**.<br>If the tab bar has the **vertical** attribute set to **true** and **BottomTabbarStyle** specified, the default value is **96vp**.<br>If the tab bar has the **vertical** attribute set to **false** and **BottomTabbarStyle** specified, the default value is the width of the **\<Tabs>** component.<br>**NOTE**<br><br>A value less than 0 or greater than the width of the **\<Tabs>** component evaluates to the default value.| 45| barHeight | number \| Length<sup>8+</sup> | Height of the tab bar.<br>The default value varies.<br>If the tab bar has the **vertical** attribute set to **false** and does not have a style specified, the default value is **56vp**.<br>If the tab bar has the **vertical** attribute set to **true** and does not have a style specified, the default value is the height of the **\<Tabs>** component.<br>If the tab bar has the **vertical** attribute set to **false** and **SubTabbarStyle** specified, the default value is **56vp**.<br>If the tab bar has the **vertical** attribute set to **true** and **SubTabbarStyle** specified, the default value is the height of the **\<Tabs>** component.<br>If the tab bar has the **vertical** attribute set to **true** and **BottomTabbarStyle** specified, the default value is the height of the **\<Tabs>** component.<br>If the tab bar has the **vertical** attribute set to **false** and **BottomTabbarStyle** specified, the default value is **56vp**.<br>**NOTE**<br>A value less than 0 or greater than the height of the **\<Tabs>** component evaluates to the default value. | 46| animationDuration | number | Duration of the slide animation for tab switching. If this parameter is set, the tab switching animation is played when the user switches between tabs by sliding or clicking. If this parameter is not set, the tab switching animation is played only when the user switches between tabs by sliding.<br>Default value: **300**<br>**NOTE**<br>A value less than 0 or in percentage evaluates to the default value. | 47 48 49## BarMode 50 51| Name | Description | 52| ---------- | ---------------------------------------- | 53| Scrollable | The width of each tab is determined by the actual layout. The tabs are scrollable in the following case: In horizontal layout, the total width exceeds the tab bar width; in horizontal layout, the total height exceeds the tab bar height.| 54| Fixed | The width of each tab is determined by equally dividing the number of tabs by the bar width (or bar height in the vertical layout).| 55 56## Events 57 58In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 59 60| Name | Description | 61| ---------------------------------------- | ---------------------------------------- | 62| onChange(event: (index: number) => void) | Triggered when a tab is switched.<br>- **index**: index of the active tab. The index starts from 0.<br>This event is triggered when any of the following conditions is met:<br>1. The **\<TabContent>** component supports sliding, and the user slides on the tab bar.<br>2. The [Controller](#tabscontroller) API is called.<br>3. The attribute value is updated using a [state variable](../../quick-start/arkts-state.md).<br>4. A tab is clicked.| 63 64## TabsController 65 66Defines a tab controller, which is used to control switching of tabs. One **TabsController** cannot control multiple **\<Tabs>** components. 67 68### Objects to Import 69 70```ts 71controller: TabsController = new TabsController() 72``` 73 74### changeIndex 75 76changeIndex(value: number): void 77 78Switches to the specified tab. 79 80**Parameters** 81 82| Name | Type | Mandatory | Description | 83| ----- | ------ | ---- | ---------------------------------------- | 84| value | number | Yes | Index of the tab. The value starts from 0.<br>**NOTE**<br>If this parameter is set to a value less than 0 or greater than the maximum number, the event will be invalid. | 85 86 87## Example 88 89```ts 90// xxx.ets 91@Entry 92@Component 93struct TabsExample { 94 @State fontColor: string = '#182431' 95 @State selectedFontColor: string = '#007DFF' 96 @State currentIndex: number = 0 97 private controller: TabsController = new TabsController() 98 99 @Builder TabBuilder(index: number, name: string) { 100 Column() { 101 Text(name) 102 .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor) 103 .fontSize(16) 104 .fontWeight(this.currentIndex === index ? 500 : 400) 105 .lineHeight(22) 106 .margin({ top: 17, bottom: 7 }) 107 Divider() 108 .strokeWidth(2) 109 .color('#007DFF') 110 .opacity(this.currentIndex === index ? 1 : 0) 111 }.width('100%') 112 } 113 114 build() { 115 Column() { 116 Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { 117 TabContent() { 118 Column().width('100%').height('100%').backgroundColor('#00CB87') 119 }.tabBar(this.TabBuilder(0, 'green')) 120 121 TabContent() { 122 Column().width('100%').height('100%').backgroundColor('#007DFF') 123 }.tabBar(this.TabBuilder(1, 'blue')) 124 125 TabContent() { 126 Column().width('100%').height('100%').backgroundColor('#FFBF00') 127 }.tabBar(this.TabBuilder(2, 'yellow')) 128 129 TabContent() { 130 Column().width('100%').height('100%').backgroundColor('#E67C92') 131 }.tabBar(this.TabBuilder(3, 'pink')) 132 } 133 .vertical(false) 134 .barMode(BarMode.Fixed) 135 .barWidth(360) 136 .barHeight(56) 137 .animationDuration(400) 138 .onChange((index: number) => { 139 this.currentIndex = index 140 }) 141 .width(360) 142 .height(296) 143 .margin({ top: 52 }) 144 .backgroundColor('#F1F3F5') 145 }.width('100%') 146 } 147} 148``` 149 150 151
