Tabs 选项卡

选项卡组件，用于在不同的内容区域之间进行切换。

代码演示

基础用法

通过v-model绑定当前选中标签的对应索引，默认第一个标签。

<hd-tabs v-model="active">
  <hd-tab title="标签1"></hd-tab>
  <hd-tab title="标签2"></hd-tab>
  <hd-tab title="标签3"></hd-tab>
</hd-tabs>

export default {
  data() {
    return {
      active: 0
    }
  }
}

选中标签颜色

通过activeColor设置选中标签颜色。

<hd-tabs v-model="active" :activeColor="activeColor">
  <hd-tab title="标签1"></hd-tab>
  <hd-tab title="标签2"></hd-tab>
  <hd-tab title="标签3"></hd-tab>
</hd-tabs>

export default {
  data() {
    return {
      active: 0,
      activeColor: '#1C64FD'
    }
  }
}

选中标签下划线颜色

通过lineColor设置选中标签下划线颜色。

<hd-tabs v-model="active":lineColor="lineColor">
  <hd-tab title="标签1"></hd-tab>
  <hd-tab title="标签2"></hd-tab>
  <hd-tab title="标签3"></hd-tab>
</hd-tabs>

export default {
  data() {
    return {
      active: 0,
      lineColor: 'linear-gradient(135deg, #3391FF 0%, #1C64FD 100%)'
    }
  }
}

选中标签下划线长度

通过lineWidth设置选中标签下划线长度，默认是0。

<hd-tabs v-model="active" :lineColor="lineColor" :lineWidth="lineWidth">
  <hd-tab title="标签1"></hd-tab>
  <hd-tab title="标签2"></hd-tab>
  <hd-tab title="标签3"></hd-tab>
</hd-tabs>

export default {
  data() {
    return {
      active: 0,
      lineColor: 'linear-gradient(135deg, #3391FF 0%, #1C64FD 100%)',
      lineWidth: 34
    }
  }
}

是否展示下划线动画

通过lineAnimated设置是否展示下划线动画，默认是true。

<hd-tabs v-model="active" :lineColor="lineColor" :lineWidth="lineWidth" :lineAnimated="lineAnimated">
  <hd-tab title="标签1"></hd-tab>
  <hd-tab title="标签2"></hd-tab>
  <hd-tab title="标签3"></hd-tab>
</hd-tabs>

export default {
  data() {
    return {
      active: 0,
      lineColor: 'linear-gradient(135deg, #3391FF 0%, #1C64FD 100%)',
      lineWidth: 34,
      lineAnimated: true
    }
  }
}

Props

Name	Description	Type	Required	Default
value	选中项	Number / String	false	-
activeColor	tab选中颜色	String	false	-
lineColor	选中项下划线颜色	String	false	-
lineWidth	下划线长度	Number	false	0
lineAnimated	是否展示下划线动画	Boolean	false	true

Events

Event Name	Description	Parameters
input	-	-
change	选中项改变时触发	value：选择器的值，建议通过v-model双向绑定输入值，而不是监听此事件的形式

Slots

Name	Description	Default Slot Content
default	-	-