1e41f4b71Sopenharmony_ci# tab-bar 2e41f4b71Sopenharmony_ci 3e41f4b71Sopenharmony_ci> **NOTE** 4e41f4b71Sopenharmony_ci> 5e41f4b71Sopenharmony_ci> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. 6e41f4b71Sopenharmony_ci 7e41f4b71Sopenharmony_ci**\<tab-bar>** is a child component of **[\<tabs>](js-components-container-tabs.md)** and is used to provide the area to display tab labels. Its child components are horizontally arranged. 8e41f4b71Sopenharmony_ci 9e41f4b71Sopenharmony_ci## Required Permissions 10e41f4b71Sopenharmony_ci 11e41f4b71Sopenharmony_ciNone 12e41f4b71Sopenharmony_ci 13e41f4b71Sopenharmony_ci 14e41f4b71Sopenharmony_ci## Child Components 15e41f4b71Sopenharmony_ci 16e41f4b71Sopenharmony_ciSupported 17e41f4b71Sopenharmony_ci 18e41f4b71Sopenharmony_ci 19e41f4b71Sopenharmony_ci## Attributes 20e41f4b71Sopenharmony_ci 21e41f4b71Sopenharmony_ciIn addition to the [universal attributes](js-components-common-attributes.md), the following attributes are supported. 22e41f4b71Sopenharmony_ci 23e41f4b71Sopenharmony_ci| Name| Type| Default Value| Mandatory| Description| 24e41f4b71Sopenharmony_ci| -------- | -------- | -------- | -------- | -------- | 25e41f4b71Sopenharmony_ci| mode | string | scrollable | No| Extensibility of the component width. Available values are as follows:<br>- **scrollable**: The width of a child component is the configured width. When the total width of all child components (including the margins) is greater than the tab-bar width, the child components can scroll horizontally.<br>- **fixed**: The width of a child component equals the tab-bar width divided by the number of child components.| 26e41f4b71Sopenharmony_ci 27e41f4b71Sopenharmony_ci 28e41f4b71Sopenharmony_ci## Styles 29e41f4b71Sopenharmony_ci 30e41f4b71Sopenharmony_ciThe [universal styles](js-components-common-styles.md) are supported. 31e41f4b71Sopenharmony_ci 32e41f4b71Sopenharmony_ci 33e41f4b71Sopenharmony_ci## Events 34e41f4b71Sopenharmony_ci 35e41f4b71Sopenharmony_ciThe [universal events](js-components-common-events.md) are supported. 36e41f4b71Sopenharmony_ci 37e41f4b71Sopenharmony_ci 38e41f4b71Sopenharmony_ci## Methods 39e41f4b71Sopenharmony_ci 40e41f4b71Sopenharmony_ciThe [universal methods](js-components-common-methods.md) are supported. 41e41f4b71Sopenharmony_ci 42e41f4b71Sopenharmony_ci 43e41f4b71Sopenharmony_ci## Example 44e41f4b71Sopenharmony_ci 45e41f4b71Sopenharmony_ciFor details, see [Example in tabs](js-components-container-tabs.md#example). 46