• 混合标签 Combined Tabs
    • 等宽标签
    • 标签动画
    • 标签初始样式
    • 混合标签属性 (Combined Tabs Attributes）
    • 标签页属性 (tabpanel Attributes）
    • 混合标签事件 (Combined Tabs Events）

    混合标签 Combined Tabs

    选项卡切换组件升级版，包含上和左切换选项卡。

    混合标签需combined-tabs和tabpanel两个组件关联使用。

    tabpanel用于设置每一个标签的名称、以及标签下对应的内容；

    combined-tabs 包裹在所有tabpanel最外层，combined-tabs下的所有tabpanel属于同一个标签页。

    等宽标签

    默认为等宽标签，当标签数过多时可在combined-tabs上设置scrollable="true"开启滚动标签栏。

    默认激活的是第一个标签页，通过combined-tabs组件上设置active-key=配置初始状态时激活的选项卡。

    必须在tabpanel组件中传入tab、key、sub-tab、sub-key、slot属性，其中：

    • tab 是混合标签栏横向显示的文字；

    • key 是混合标签栏横向的标识，对应combined-tabs中的active-key；

    • sub-tab 是混合标签栏竖向显示的文字；

    • sub-key 是混合标签栏竖向的标识；

    • slot 受小程序的限制，必须传属性slot且值的内容与key保持一致；

    • tabpanel标签中包裹的内容为标签栏对应的内容。

    标签动画

    在combined-tabs上设置animated="true"开启标签页切换动画，默认不开启。

    标签初始样式

    • 标签栏位置在顶部和底部时的默认高度为80rpx，宽度等分，开启scrollable时，最小宽度为160rpx;
    • 标签栏位置在左边或右边时，默认宽度为160rpx,高度等分,开启scrollable时，最小高度为80rpx;
    • 可通过l-class-header、l-class-active、l-class-inactive覆盖默认标签栏样式。

    混合标签属性 (Combined Tabs Attributes）

    参数说明类型可选值默认值
    l-class-header外部样式类，覆盖标签头部整体样式String--
    l-class-active外部样式类，覆盖标签激活状态样式String--
    l-class-inactive外部样式类，覆盖标签默认状态样式String--
    l-class-line外部样式类，覆盖标签选中时装饰线的样式String--
    active-key默认激活tabs的keyString-默认为第一个
    animated是否使用动画切换标签Booleanfalse
    scrollable是否滚动标签栏Booleanfalse-
    active-color设置激活状态标签的文本颜色String表示颜色的是16进制-
    inactive-color设置未激活状态标签的文本和颜色String表示颜色的是16进制-
    has-line设置是否显示标签下的装饰线Boolean-true

    标签页属性 (tabpanel Attributes）

    参数说明类型可选值默认值
    key对应 active-key，必填String--
    tab选项卡头显示文字String--
    sub-key混合选项卡竖向keyString--
    sub-tab混合选项卡竖向显示文字String--
    slotkey一致，有sub-key时则与sub-key保持一致，必填String--

    混合标签事件 (Combined Tabs Events）

    事件名称说明返回值备注
    bind:linchangetab 切换的回调事件当前横向激活标签页activeKey 、currentIndex ，竖向标签页的subCurrentIndex 、activeSubKey ,-