标签页

分隔内容上有关联但属于不同类别的数据集合。

基础用法

内容1
内容2
内容3
内容4 
<cb-tabs v-model="test1">
  <cb-tab-pane label="标签1">
    内容1
  </cb-tab-pane>
  <cb-tab-pane label="标签2">
    内容2
  </cb-tab-pane>
  <cb-tab-pane label="标签3">
    内容3
  </cb-tab-pane>
  <cb-tab-pane label="标签4">
    内容4
  </cb-tab-pane>
</cb-tabs>

Pills 风格

内容1
内容2
内容3
内容4 
<cb-tabs pills v-model="test2">
  <cb-tab-pane label="标签1">
    内容1
  </cb-tab-pane>
  <cb-tab-pane label="标签2">
    内容2
  </cb-tab-pane>
  <cb-tab-pane label="标签3">
    内容3
  </cb-tab-pane>
  <cb-tab-pane label="标签4">
    内容4
  </cb-tab-pane>
</cb-tabs>

两端对齐

内容1
内容2
内容3
内容4 
<cb-tabs justified v-model="test3">
  <cb-tab-pane label="标签1">
    内容1
  </cb-tab-pane>
  <cb-tab-pane label="标签2">
    内容2
  </cb-tab-pane>
  <cb-tab-pane label="标签3">
    内容3
  </cb-tab-pane>
  <cb-tab-pane label="标签4">
    内容4
  </cb-tab-pane>
</cb-tabs>

禁用状态

内容1
内容2
内容3 
<cb-tabs v-model="test4">
  <cb-tab-pane label="标签1">
    内容1
  </cb-tab-pane>
  <cb-tab-pane label="标签2">
    内容2
  </cb-tab-pane>
  <cb-tab-pane disabled label="禁用标签3">
    内容3
  </cb-tab-pane>
</cb-tabs>

自定义标签页

内容1
内容2
内容3
内容4 
<cb-tabs v-model="test5">
  <cb-tab-pane>
    <template #label>
      <cb-icon name="chrome" /> 标签1
    </template>
    内容1
  </cb-tab-pane>
  <cb-tab-pane label="标签2">
    内容2
  </cb-tab-pane>
  <cb-tab-pane label="标签3">
    内容3
  </cb-tab-pane>
  <cb-tab-pane label="标签4">
    内容4
  </cb-tab-pane>
</cb-tabs>

cb-tabs 属性

参数 说明 类型 可选值 默认值
v-model 绑定值，表示当前 tab 的索引，从 0 开始。 number — 0
pills 是否 Pills 风格。 boolean — false
justified 是否两端对齐。 boolean — false
stacked 启用 Pills 风格时，是否垂直排列标签页。 boolean — false

cb-tabs 事件

名称 说明
change 标签页切换时触发的事件，事件处理函数会传递一个标签页索引值。

cb-tab-pane 属性

参数 说明 类型 可选值 默认值
label 选项卡标题 string — —
disabled 是否禁用 boolean — false

cb-tab-pane 插槽

名称 说明
label 用于自定义选项卡内容。