加入 Gitee

与超过 1200万开发者一起发现、参与优秀开源项目，私有仓库也完全免费：）

克隆/下载

js-components-container-tab-content.md 3.21 KB

# tab-content<a name="ZH-CN_TOPIC_0000001173164727"></a>

<[tabs](js-components-container-tabs.md)\>的子组件，用来展示tab的内容区，高度默认充满tabs剩余空间，子组件排列方式为横向排列，当作为容器组件的子元素时在主轴方向需要设置tab-content的确定长度，否则无法显示。

## 权限列表<a name="section11257113618419"></a>

无

## 子组件<a name="s6831289f2fac48a892746bd57f336c26"></a>

支持。

## 属性<a name="s623ab9c704b24c329d0e91e85a30263e"></a>

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

<a name="table20633101642315"></a>
<table><thead align="left"><tr id="row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="aa872998ac2d84843a3c5161889afffef"><a name="aa872998ac2d84843a3c5161889afffef"></a><a name="aa872998ac2d84843a3c5161889afffef"></a>名称</p>
</th>
<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="ab2111648ee0e4f6d881be8954e7acaab"><a name="ab2111648ee0e4f6d881be8954e7acaab"></a><a name="ab2111648ee0e4f6d881be8954e7acaab"></a>类型</p>
</th>
<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="ab377d1c90900478ea4ecab51e9a058af"><a name="ab377d1c90900478ea4ecab51e9a058af"></a><a name="ab377d1c90900478ea4ecab51e9a058af"></a>默认值</p>
</th>
<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="p824610360217"><a name="p824610360217"></a><a name="p824610360217"></a>必填</p>
</th>
<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="a1d574a0044ed42ec8a2603bc82734232"><a name="a1d574a0044ed42ec8a2603bc82734232"></a><a name="a1d574a0044ed42ec8a2603bc82734232"></a>描述</p>
</th>
</tr>
</thead>
<tbody><tr id="row0117609300"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="p126261111307"><a name="p126261111307"></a><a name="p126261111307"></a>scrollable</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="p206261816301"><a name="p206261816301"></a><a name="p206261816301"></a>boolean</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p46261615305"><a name="p46261615305"></a><a name="p46261615305"></a>true</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p116261914304"><a name="p116261914304"></a><a name="p116261914304"></a>否</p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="p1062618163010"><a name="p1062618163010"></a><a name="p1062618163010"></a>是否可以通过左右滑动进行页面切换。默认为true，设置为false后，页面的切换只能通过tab-bar的点击实现。</p>
</td>
</tr>
</tbody>
</table>

## 样式<a name="section15751323144115"></a>

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

## 事件<a name="s0c39d3f35b9d4af69a19456ae743c675"></a>

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

## 示例<a name="section11929165914411"></a>

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

一键复制编辑原始数据按行查看历史

提交于 2021-11-10 20:02 . add arkui

tab-content

<tabs>的子组件，用来展示tab的内容区，高度默认充满tabs剩余空间，子组件排列方式为横向排列，当作为容器组件的子元素时在主轴方向需要设置tab-content的确定长度，否则无法显示。

权限列表

无

子组件

支持。

属性

除支持通用属性外，还支持如下属性：

名称	类型	默认值	必填	描述
scrollable	boolean	true	否	是否可以通过左右滑动进行页面切换。默认为true，设置为false后，页面的切换只能通过tab-bar的点击实现。

样式

支持通用样式。

事件

支持通用事件。

示例

详见tabs示例。

https://gitee.com/openharmony-build/docs.git

git@gitee.com:openharmony-build/docs.git

openharmony-build

docs

master

OpenHarmony-build / docs

tab-content

权限列表

子组件

属性

样式

事件

示例

简介

发行版

贡献者

近期动态

OpenHarmony-build / docs .gitee-modal { width: 500px !important; }

tab-content

权限列表

子组件

属性

样式

事件

示例

简介

发行版

贡献者

近期动态

搜索帮助

OpenHarmony-build / docs