混合标签 Combined Tabs

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

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

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

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

等宽标签

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

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

必须在tabpanel组件中传入tabkeysub-tabsub-keyslot属性,其中:

  • 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-header-classl-active-classl-inactive-class覆盖默认标签栏样式。

混合标签属性 (Combined Tabs Attributes)

参数 说明 类型 可选值 默认值
active-key 默认激活tabs的key String - 默认为第一个
animated 是否使用动画切换标签 Boolean false
scrollable 是否滚动标签栏 Boolean false -
active-color 设置激活状态标签的文本颜色 String 表示颜色的是16进制 -
inactive-color 设置未激活状态标签的文本和颜色 String 表示颜色的是16进制 -
has-line 设置是否显示标签下的装饰线 Boolean - true

混合标签外部样式类(Combined Tabs ExternalClasses)

外部样式类名 说明 备注
l-header-class 外部样式类,覆盖标签头部整体样式 取代l-class-header
l-active-class 外部样式类,覆盖标签激活状态样式 取代l-class-active
l-inactive-class 外部样式类,覆盖标签默认状态样式 取代l-class-inactive
l-line-class 外部样式类,覆盖标签选中时装饰线的样式 取代l-class-line

已经弃用的外部样式类

以下这些外部样式类已经停止支持,将在未来的某个版本中去除,请使用上方的外部样式类替代。

外部样式类名 说明 备注
l-class-header 外部样式类,覆盖标签头部整体样式 请使用l-header-class替代
l-class-active 外部样式类,覆盖标签激活状态样式 请使用l-active-class替代
l-class-inactive 外部样式类,覆盖标签默认状态样式 请使用l-inactive-class替代
l-class-line 外部样式类,覆盖标签选中时装饰线的样式 请使用l-line-class替代

标签页属性 (tabpanel Attributes)

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

混合标签事件 (Combined Tabs Events)

事件名称 说明 返回值 备注
bind:linchange tab 切换的回调事件 当前横向激活标签页activeKeycurrentIndex ,竖向标签页的subCurrentIndexactiveSubKey , -
    上次更新: 2019-9-11 21:38:30