Tab
Install

安装

如果需要监听tab-item的点击事件并取得索引,请使用on-item-click事件:

<tab>
  <tab-item @on-item-click="handler"></tab-item>
</tab>

tab

tab

属性

名字类型默认值说明版本要求
line-widthnumber3线条宽度--
active-colorstring选中时文字颜色--
default-colorstring默认文字颜色--
disabled-colorstring不可点击时文字颜色--
bar-active-colorstring设置底部bar颜色,该颜色也可以通过less变量@tab-bar-active-color设置。--
animatebooleantrue切换时是否需要动画--
custom-bar-widthstring
function
设置底部bar宽度,默认宽度是整体tab宽度平分,比如50px。使用函数时参数为当前索引index,你可以定义不同tab-item对应的bar宽度。v2.1.1-rc.7
badge-labelstring徽标文字v2.3.5
badge-backgroundstring徽标背景颜色v2.3.5
badge-colorstring徽标文字颜色v2.3.5
prevent-defaultstringfalse是否禁止自动切换 tab-itemv2.7.2
scroll-thresholdnumber4滚动阀值,超过可滚动v2.8.1
bar-positionstringbottom边框位置,可以为 bottom 或者 top。仅支持 animate 为 true 的情况。v2.9.0
tab-item

tab-item

属性

名字类型默认值说明版本要求
disabledbooleanfalse是否不可选--
active-classstring当前项选中时的class--

事件

名字参数说明版本要求
@on-item-click(index)当前 tabItem 被点击时触发v2.2.1-rc.4
Variables

样式变量

名字默认值说明继承自变量
@tab-text-disabled-color #ddd --
@tab-text-default-color #666 --
@tab-text-active-color #04BE02 --@theme-color
@tab-bar-active-color #04BE02 --@theme-color


贡献者

贡献者

该组件(包含文档)迭代次数 28,贡献人数 5

airylandconsole万刚Kwan

Changelog

发布日志

  • v2.9.4 [change] 修复 tab的父级width没有100%或者有padding 滚动造成文字跟横杠错位问题 #2850
  • v2.9.1 [fix] 修复全局 box-sizing 为 border-box 时导致的高度问题 #2621。感谢 @suncodeer
  • v2.9.0 [feature] 支持使用 bar-position 定义边框位置
  • v2.8.1 [feature] 支持滚动
  • v2.7.2 [feature] 支持阻止自动切换 #2176
  • v2.3.5 [feature] 支持设置 badge #1513
  • v2.2.1-rc.4 [enhance] 支持 on-item-click 带上 index 参数
  • v2.1.1-rc.7 [feature] 支持定义 bar 宽度
  • v2.1.1-rc.7 [fix] 修复初始化时没有 tab-item 时导致报错 #1038 @liu2010y
  • v2.1.0-rc.46 [feature] 支持设置 `bar-active-color` #715 @greedying