1# tabs 2 3> **NOTE** 4> 5> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. 6 7The **\<tabs>** component provides a tab container. 8 9## Required Permissions 10 11None 12 13 14## Child Components 15 16Only [\<tab-bar>](../arkui-js/js-components-container-tab-bar.md) and [\<tab-content>](../arkui-js/js-components-container-tab-content.md) are supported. 17 18## Attributes 19 20In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported. 21 22| Name | Type | Default Value | Mandatory | Description | 23| -------- | ------- | ----- | ---- | ---------------------------------------- | 24| index | number | 0 | No | Index of the active tab. | 25| vertical | boolean | false | No | Whether the tab is vertical. Available values are as follows:<br>- **false**: The **\<tab-bar>** and **\<tab-content>** are arranged vertically.<br>- **true**: The **\<tab-bar>** and **\<tab-content>** are arranged horizontally. | 26 27 28## Styles 29 30The [universal styles](../arkui-js/js-components-common-styles.md) are supported. 31 32 33## Events 34 35In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported. 36 37| Name | Parameter | Description | 38| ------ | ------------------------------------ | ----------------------------- | 39| change | { index: indexValue } | Triggered upon tab switching. This event is not triggered when the **index** value is dynamically changed.| 40 41 42## Example 43 44```html 45<!-- xxx.hml --> 46<div class="container"> 47 <tabs class = "tabs" index="0" vertical="false" onchange="change"> 48 <tab-bar class="tab-bar" mode="fixed"> 49 <text class="tab-text">Home</text> 50 <text class="tab-text">Index</text> 51 <text class="tab-text">Detail</text> 52 </tab-bar> 53 <tab-content class="tabcontent" scrollable="true"> 54 <div class="item-content" > 55 <text class="item-title">First screen</text> 56 </div> 57 <div class="item-content" > 58 <text class="item-title">Second screen</text> 59 </div> 60 <div class="item-content" > 61 <text class="item-title">Third screen</text> 62 </div> 63 </tab-content> 64 </tabs> 65</div> 66``` 67 68```css 69/* xxx.css */ 70.container { 71 flex-direction: column; 72 justify-content: flex-start; 73 align-items: center; 74} 75.tabs { 76 width: 100%; 77} 78.tabcontent { 79 width: 100%; 80 height: 80%; 81 justify-content: center; 82} 83.item-content { 84 height: 100%; 85 justify-content: center; 86} 87.item-title { 88 font-size: 60px; 89} 90.tab-bar { 91 margin: 10px; 92 height: 60px; 93 border-color: #007dff; 94 border-width: 1px; 95} 96.tab-text { 97 width: 300px; 98 text-align: center; 99} 100``` 101 102```js 103// xxx.js 104export default { 105 change: function(e) { 106 console.log("Tab index: " + e.index); 107 }, 108} 109``` 110 111 112
