HarmonyOS API：容器组件

joytrian

发布于 2023-3-29 15:58

浏览

0收藏

版本：v3.1 Beta

tabs

更新时间: 2023-02-17 09:19

说明

从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

tab页签容器。

权限列表

无

子组件

仅支持<tab-bar>和<tab-content>。

示例

div class="containe">
    <text class="tittle">横向展示</text>
    <tabs class="tabs" onchange="tabChange">
        <tab-bar class="tabBar">
            <text class="tabBarItem">页签1</text>
            <text class="tabBarItem">页签2</text>
            <text class="tabBarItem">页签3</text>
        </tab-bar>
        <tab-content class="tabContent">
            <div class="tabContentItem">
                <text>内容1</text>
            </div>
            <div class="tabContentItem" >
                <text>内容2</text>
            </div>
            <div class="tabContentItem" >
                <text>内容3</text>
            </div>
        </tab-content>
    </tabs>

    <text class="tittle">纵向展示</text>
    <tabs class="tabs" onchange="tabChange" vertical="true">
        <tab-bar class="tabBar1">
            <text class="tabBarItem1">页签1</text>
            <text class="tabBarItem1">页签2</text>
            <text class="tabBarItem1">页签3</text>
        </tab-bar>
        <tab-content class="tabContent1">
            <div class="tabContentItem1">
                <text>内容1</text>
            </div>
            <div class="tabContentItem1" >
                <text>内容2</text>
            </div>
            <div class="tabContentItem1" >
                <text>内容3</text>
            </div>
        </tab-content>
    </tabs>
</div>

HarmonyOS API：容器组件-鸿蒙开发者社区

属性

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

名称	类型	默认值	必填	描述
index	number	0	否	当前处于激活态的tab索引。
vertical	boolean	false	否	是否为纵向的tab，默认为false，可选值为： - false：tabbar和tabcontent上下排列。 - true：tabbar和tabcontent左右排列。

样式

支持通用样式。

事件

除支持通用事件外，还支持如下事件：

名称	参数	描述
change	{ index: indexValue }	tab页签切换后触发，动态修改index值不会触发该回调。

tab-bar

更新时间: 2023-02-17 09:19

说明

从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

<tabs>的子组件，用来展示tab的标签区，子组件排列方式为横向排列。

权限列表

无

子组件

支持。

属性

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

名称	类型	默认值	必填	描述
mode	string	scrollable	否	设置组件宽度的可延展性。可选值为： - scrollable：子组件宽度为实际设置的宽度，当宽度之和（包括margin边距）大于tab-bar的宽度时，子组件可以横向滑动。 - fixed：子组件宽度均分tab-bar的宽度。

tab-content

更新时间: 2023-02-17 09:19

说明

从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

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

权限列表

无

子组件

支持。

属性

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

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