java_project
/
logpm
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
货无忧
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 Commits
6 Branches
0 Tags
476 MiB
 
 
 
 
 
Tree: 577383ec2d
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '577383ec2d'
${ noResults }
logpm/uni_modules/fant-mini-plus/components/hd-tabs/INDEX.md

2.0 KiB
Raw Blame History

代码演示

基础用法

通过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>

const active = ref<number>(0)

选中标签颜色

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

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

const active = ref<number>(0)

选中标签下划线颜色

通过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>

const active = ref<number>(0)
const lineColor = ref<string>( '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>

const active = ref<number>(0)
const lineColor = ref<string>( 'linear-gradient(135deg, #3391FF 0%, #1C64FD 100%)')
const lineWidth = ref<number>(24)

是否展示下划线动画

通过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>

const active = ref<number>(0)
const lineColor = ref<string>( 'linear-gradient(135deg, #3391FF 0%, #1C64FD 100%)')
const lineWidth = ref<number>(24)
const lineAnimated = ref<boolean>(true)