# tab-bar<a name="ZH-CN_TOPIC_0000001164130760"></a>

-   [权限列表](#zh-cn_topic_0000001173324603_section11257113618419)
-   [子组件](#zh-cn_topic_0000001173324603_sfddaafa400fa4802a6c4344a0cc0f9ed)
-   [属性](#zh-cn_topic_0000001173324603_s45d9533b71b049aba681c57db73d9f7b)
-   [样式](#zh-cn_topic_0000001173324603_section193239416388)
-   [事件](#zh-cn_topic_0000001173324603_section71081937192815)
-   [方法](#zh-cn_topic_0000001173324603_section2279124532420)
-   [示例](#zh-cn_topic_0000001173324603_section10605165263911)

<[tabs](js-components-container-tabs.md#ZH-CN_TOPIC_0000001209252163)\>的子组件，用来展示tab的标签区，子组件排列方式为横向排列。

## 权限列表<a name="zh-cn_topic_0000001173324603_section11257113618419"></a>

无

## 子组件<a name="zh-cn_topic_0000001173324603_sfddaafa400fa4802a6c4344a0cc0f9ed"></a>

支持。

## 属性<a name="zh-cn_topic_0000001173324603_s45d9533b71b049aba681c57db73d9f7b"></a>

除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性：

<a name="zh-cn_topic_0000001173324603_table20633101642315"></a>
<table><thead align="left"><tr id="zh-cn_topic_0000001173324603_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001173324603_aa872998ac2d84843a3c5161889afffef"><a name="zh-cn_topic_0000001173324603_aa872998ac2d84843a3c5161889afffef"></a><a name="zh-cn_topic_0000001173324603_aa872998ac2d84843a3c5161889afffef"></a>名称</p>
</th>
<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="zh-cn_topic_0000001173324603_ab2111648ee0e4f6d881be8954e7acaab"><a name="zh-cn_topic_0000001173324603_ab2111648ee0e4f6d881be8954e7acaab"></a><a name="zh-cn_topic_0000001173324603_ab2111648ee0e4f6d881be8954e7acaab"></a>类型</p>
</th>
<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="zh-cn_topic_0000001173324603_ab377d1c90900478ea4ecab51e9a058af"><a name="zh-cn_topic_0000001173324603_ab377d1c90900478ea4ecab51e9a058af"></a><a name="zh-cn_topic_0000001173324603_ab377d1c90900478ea4ecab51e9a058af"></a>默认值</p>
</th>
<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="zh-cn_topic_0000001173324603_p824610360217"><a name="zh-cn_topic_0000001173324603_p824610360217"></a><a name="zh-cn_topic_0000001173324603_p824610360217"></a>必填</p>
</th>
<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="zh-cn_topic_0000001173324603_a1d574a0044ed42ec8a2603bc82734232"><a name="zh-cn_topic_0000001173324603_a1d574a0044ed42ec8a2603bc82734232"></a><a name="zh-cn_topic_0000001173324603_a1d574a0044ed42ec8a2603bc82734232"></a>描述</p>
</th>
</tr>
</thead>
<tbody><tr id="zh-cn_topic_0000001173324603_row535514483277"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324603_p691913535274"><a name="zh-cn_topic_0000001173324603_p691913535274"></a><a name="zh-cn_topic_0000001173324603_p691913535274"></a>mode</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324603_p20919195319272"><a name="zh-cn_topic_0000001173324603_p20919195319272"></a><a name="zh-cn_topic_0000001173324603_p20919195319272"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324603_p1091935342713"><a name="zh-cn_topic_0000001173324603_p1091935342713"></a><a name="zh-cn_topic_0000001173324603_p1091935342713"></a>scrollable</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324603_p159191153142712"><a name="zh-cn_topic_0000001173324603_p159191153142712"></a><a name="zh-cn_topic_0000001173324603_p159191153142712"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324603_p129191953112718"><a name="zh-cn_topic_0000001173324603_p129191953112718"></a><a name="zh-cn_topic_0000001173324603_p129191953112718"></a>设置组件宽度的可延展性。可选值为：</p>
<a name="zh-cn_topic_0000001173324603_ul09198536276"></a><a name="zh-cn_topic_0000001173324603_ul09198536276"></a><ul id="zh-cn_topic_0000001173324603_ul09198536276"><li>scrollable：子组件宽度为实际设置的宽度，当宽度之和（包括margin边距）大于tab-bar的宽度时，子组件可以横向滑动。</li><li>fixed：子组件宽度均分tab-bar的宽度。</li></ul>
</td>
</tr>
</tbody>
</table>

## 样式<a name="zh-cn_topic_0000001173324603_section193239416388"></a>

支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)。

## 事件<a name="zh-cn_topic_0000001173324603_section71081937192815"></a>

支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)。

## 方法<a name="zh-cn_topic_0000001173324603_section2279124532420"></a>

支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)。

## 示例<a name="zh-cn_topic_0000001173324603_section10605165263911"></a>

详见[tabs示例](js-components-container-tabs.md#zh-cn_topic_0000001173324585_section14993155318710)。