介绍

选项卡切换组件。

代码演示

基础使用

通过 v-model:current 绑定当前激活标签对应的索引值，默认情况下启用第一个标签。

vue ts

<template>
  <s-tabs v-model="value" :options="options"></s-tabs>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { type TabProps } from 'sard'

const value = ref(1)
const options = ref<TabProps[]>([
  { label: '标签1', value: 1 },
  { label: '标签2', value: 2 },
  { label: '标签3', value: 3 },
])
</script>

vue js

<template>
  <s-tabs v-model="value" :options="options"></s-tabs>
</template>

<script setup lang="js">
import { ref } from 'vue'
import 'sard'
const value = ref(1)
const options = ref([
  {
    label: '标签1',
    value: 1,
  },
  {
    label: '标签2',
    value: 2,
  },
  {
    label: '标签3',
    value: 3,
  },
])
</script>

可滚动标签栏

设置 scrollable 后标签不再平分空间，并且可以实现水平滚动。

vue ts

<template>
  <s-tabs v-model="value" :options="options" scrollable></s-tabs>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { type TabProps } from 'sard'

const value = ref(5)
const options = ref<TabProps[]>(
  Array(10)
    .fill(0)
    .map((_, i) => {
      return {
        label: `标签${i + 1}`,
        value: i + 1,
      }
    }),
)
</script>

vue js

<template>
  <s-tabs v-model="value" :options="options" scrollable></s-tabs>
</template>

<script setup lang="js">
import { ref } from 'vue'
import 'sard'
const value = ref(5)
const options = ref(
  Array(10)
    .fill(0)
    .map((_, i) => {
      return {
        label: `标签${i + 1}`,
        value: i + 1,
      }
    }),
)
</script>

禁用标签

禁用的标签无法手动选择。

vue ts

<template>
  <s-tabs v-model="value" :options="options"></s-tabs>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { type TabProps } from 'sard'

const value = ref(1)
const options = ref<TabProps[]>([
  { label: '标签1', value: 1 },
  { label: '标签2', value: 2, disabled: true },
  { label: '标签3', value: 3 },
])
</script>

vue js

<template>
  <s-tabs v-model="value" :options="options"></s-tabs>
</template>

<script setup lang="js">
import { ref } from 'vue'
import 'sard'
const value = ref(1)
const options = ref([
  {
    label: '标签1',
    value: 1,
  },
  {
    label: '标签2',
    value: 2,
    disabled: true,
  },
  {
    label: '标签3',
    value: 3,
  },
])
</script>

药丸类型

设置 type="pill" 可以让标签显示为药丸风格。

vue ts

<template>
  <s-tabs v-model="value" :options="options" type="pill" scrollable></s-tabs>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { type TabProps } from 'sard'

const value = ref(1)
const options = ref<TabProps[]>(
  Array(10)
    .fill(0)
    .map((_, i) => {
      return {
        label: `标签${i + 1}`,
        value: i + 1,
      }
    }),
)
</script>

vue js

<template>
  <s-tabs v-model="value" :options="options" type="pill" scrollable></s-tabs>
</template>

<script setup lang="js">
import { ref } from 'vue'
import 'sard'
const value = ref(1)
const options = ref(
  Array(10)
    .fill(0)
    .map((_, i) => {
      return {
        label: `标签${i + 1}`,
        value: i + 1,
      }
    }),
)
</script>

卡片类型

设置 type="card" 可以让标签显示为卡片风格。

vue ts

<template>
  <s-tabs v-model="value" :options="options" type="card"></s-tabs>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { type TabProps } from 'sard'

const value = ref(1)
const options = ref<TabProps[]>([
  { label: '标签1', value: 1 },
  { label: '标签2', value: 2 },
  { label: '标签3', value: 3 },
])
</script>

vue js

<template>
  <s-tabs v-model="value" :options="options" type="card"></s-tabs>
</template>

<script setup lang="js">
import { ref } from 'vue'
import 'sard'
const value = ref(1)
const options = ref([
  {
    label: '标签1',
    value: 1,
  },
  {
    label: '标签2',
    value: 2,
  },
  {
    label: '标签3',
    value: 3,
  },
])
</script>

自定义标签

除了通过 options 属性设置标签内容，还可以通过组件的方式自由地渲染任何内容。

vue ts

<template>
  <s-tabs v-model="value" style="--s-tabs-line-bg: transparent">
    <s-tab :value="1">
      <demo-icon name="star" />
      <div class="ms-1">标签1</div>
    </s-tab>
    <s-tab :value="2">
      <div>标签2</div>
      <s-badge value="5" />
    </s-tab>
    <s-tab :value="3" label="标签3"></s-tab>

    <template #line>
      <demo-icon name="smile-line" color="var(--s-color-danger)" size="20px" />
    </template>
  </s-tabs>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(1)
</script>

vue js

<template>
  <s-tabs v-model="value" style="--s-tabs-line-bg: transparent">
    <s-tab :value="1">
      <demo-icon name="star" />
      <div class="ms-1">标签1</div>
    </s-tab>
    <s-tab :value="2">
      <div>标签2</div>
      <s-badge value="5" />
    </s-tab>
    <s-tab :value="3" label="标签3"></s-tab>

    <template #line>
      <demo-icon name="smile-line" color="var(--s-color-danger)" size="20px" />
    </template>
  </s-tabs>
</template>

<script setup lang="js">
import { ref } from 'vue'
const value = ref(1)
</script>

API

TabsProps

属性	描述	类型	默认值
model-value	当前选中的标签的 value	unknown	-
options	标签项数组	TabProps[]	-
type	标签类型	'line' | 'pill' | 'card'	'line'
scrollable	是否可滚动	boolean	false

TabsSlots

插槽	描述	属性
default	自定义默认内容	-
line	自定义线条内容	-

TabsEmits

事件	描述	类型
update:modelValue	当前激活的标签改变时触发	(value: unknown) => void
change	当前激活的标签改变时触发	(value: unknown) => void

TabProps

属性	描述	类型	默认值
label	标签页文本	string	-
value	标签页值	unknown	-
disabled	是否禁用标签	boolean	false

TabSlots

插槽	描述	属性
default	自定义默认内容	-

TabEmits

事件	描述	类型
click	点击标签时触发，不论是否禁用	(event: MouseEvent) => void

主题定制

样式变量

CSS 变量	值
--s-tabs-tab-height	var(--s-content-height)
--s-tabs-tab-font-size	var(--s-font-size)
--s-tabs-tab-line-height	var(--s-line-height-snug)
--s-tabs-tab-color	var(--s-text-color-secondary)
--s-tabs-tab-color-active	var(--s-text-color-emphasis)
--s-tabs-tab-padding-x	var(--s-size)
--s-tabs-pill-tab-height	30px
--s-tabs-pill-tab-bg-current	var(--s-color-primary)
--s-tabs-pill-tab-color-current	var(--s-white)
--s-tabs-card-tab-height	30px
--s-tabs-card-color-primary	var(--s-color-primary)
--s-tabs-card-border-radius	var(--s-border-radius)
--s-tabs-line-width	40px
--s-tabs-line-height	3px
--s-tabs-line-bg	var(--s-color-primary)
--s-tabs-line-duration	var(--s-duration)