Sard Uniapp

Appearance

在新窗口打开⤴

Tabs标签页

介绍 ​

选项卡切换组件。

引入 ​

js
import Tabs from 'sard-uniapp/components/tabs/tabs.vue'
import Tab from 'sard-uniapp/components/tab/tab.vue'

代码演示 ​

基础使用 ​

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

vue
<template>
  <sar-tabs v-model:current="current" :list="list"></sar-tabs>
</template>

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

const current = ref(0)
const list = ref<TabOption[]>([
  { title: '标签0' },
  { title: '标签1' },
  { title: '标签2' },
])
</script>
vue
<template>
  <sar-tabs v-model:current="current" :list="list"></sar-tabs>
</template>

<script setup lang="js">
import { ref } from "vue";
const current = ref(0);
const list = ref([
  { title: "\u6807\u7B7E0" },
  { title: "\u6807\u7B7E1" },
  { title: "\u6807\u7B7E2" }
]);
</script>

可滚动标签栏 ​

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

vue
<template>
  <sar-tabs v-model:current="current" :list="list" scrollable></sar-tabs>
</template>

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

const current = ref(6)
const list = ref<TabOption[]>(
  Array(10)
    .fill(0)
    .map((_, i) => {
      return {
        title: `标签${i}`,
      }
    }),
)
</script>
vue
<template>
  <sar-tabs v-model:current="current" :list="list" scrollable></sar-tabs>
</template>

<script setup lang="js">
import { ref } from "vue";
const current = ref(6);
const list = ref(
  Array(10).fill(0).map((_, i) => {
    return {
      title: `\u6807\u7B7E${i}`
    };
  })
);
</script>

禁用标签 ​

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

vue
<template>
  <sar-tabs v-model:current="current" :list="list"></sar-tabs>
</template>

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

const current = ref(0)
const list = ref<TabOption[]>([
  { title: '标签0' },
  { title: '标签1', disabled: true },
  { title: '标签2' },
])
</script>
vue
<template>
  <sar-tabs v-model:current="current" :list="list"></sar-tabs>
</template>

<script setup lang="js">
import { ref } from "vue";
const current = ref(0);
const list = ref([
  { title: "\u6807\u7B7E0" },
  { title: "\u6807\u7B7E1", disabled: true },
  { title: "\u6807\u7B7E2" }
]);
</script>

药丸类型 ​

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

vue
<template>
  <sar-tabs
    v-model:current="current"
    :list="list"
    type="pill"
    scrollable
  ></sar-tabs>
</template>

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

const current = ref(0)
const list = ref<TabOption[]>(
  Array(10)
    .fill(0)
    .map((_, i) => {
      return {
        title: `标签${i}`,
      }
    }),
)
</script>
vue
<template>
  <sar-tabs
    v-model:current="current"
    :list="list"
    type="pill"
    scrollable
  ></sar-tabs>
</template>

<script setup lang="js">
import { ref } from "vue";
const current = ref(0);
const list = ref(
  Array(10).fill(0).map((_, i) => {
    return {
      title: `\u6807\u7B7E${i}`
    };
  })
);
</script>

卡片类型 ​

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

vue
<template>
  <sar-tabs v-model:current="current" :list="list" type="card"></sar-tabs>
</template>

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

const current = ref(0)
const list = ref<TabOption[]>([
  { title: '标签0' },
  { title: '标签1' },
  { title: '标签2' },
])
</script>
vue
<template>
  <sar-tabs v-model:current="current" :list="list" type="card"></sar-tabs>
</template>

<script setup lang="js">
import { ref } from "vue";
const current = ref(0);
const list = ref([
  { title: "\u6807\u7B7E0" },
  { title: "\u6807\u7B7E1" },
  { title: "\u6807\u7B7E2" }
]);
</script>

自定义标签 ​

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

INFO

如果通过组件的方式渲染，必须设置 name 属性来代替默认的下标。

vue
<template>
  <sar-tabs v-model:current="current" style="--sar-tabs-line-bg: transparent">
    <sar-tab name="0">
      <sar-icon name="star" />
      <view style="margin-left: 8rpx">标签0</view>
    </sar-tab>
    <sar-tab name="1">
      <view>标签1</view>
      <sar-badge value="5" />
    </sar-tab>
    <sar-tab name="2" title="标签2"></sar-tab>

    <template #line>
      <sar-icon
        family="demo-icons"
        name="smile-line"
        color="var(--sar-danger)"
        size="40rpx"
      />
    </template>
  </sar-tabs>
</template>

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

const current = ref('0')
</script>
vue
<template>
  <sar-tabs v-model:current="current" style="--sar-tabs-line-bg: transparent">
    <sar-tab name="0">
      <sar-icon name="star" />
      <view style="margin-left: 8rpx">标签0</view>
    </sar-tab>
    <sar-tab name="1">
      <view>标签1</view>
      <sar-badge value="5" />
    </sar-tab>
    <sar-tab name="2" title="标签2"></sar-tab>

    <template #line>
      <sar-icon
        family="demo-icons"
        name="smile-line"
        color="var(--sar-danger)"
        size="40rpx"
      />
    </template>
  </sar-tabs>
</template>

<script setup lang="js">
import { ref } from "vue";
const current = ref("0");
</script>

API ​

TabsProps ​

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-
current (v-model)当前选中的标签的 name，默认为标签的下标number | string-
list标签数组，会被默认插槽覆盖TabProps[]-
type标签类型'line' | 'pill' | 'card''line'
scrollable是否可滚动booleanfalse

TabsSlots ​

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

TabsEmits ​

事件描述类型
update:current当前激活的标签改变时触发(name: string | number | boolean) => void
change 1.12.2+当前激活的标签改变时触发(name: string | number| boolean) => void

TabProps / TabOption ​

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-
title标签显示的标题string-
name标签的唯一标识，默认为对应的下标，使用标签组件时要手动指定string | number| boolean-
disabled是否禁用标签booleanfalse

TabSlots ​

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

TabEmits ​

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

主题定制 ​

CSS 变量 ​

scss
page,
.sar-portal {
  --sar-tabs-tab-height: 88rpx;
  --sar-tabs-tab-font-size: var(--sar-text-base);
  --sar-tabs-tab-line-height: var(--sar-leading-snug);
  --sar-tabs-tab-color: var(--sar-secondary-color);
  --sar-tabs-tab-active-color: var(--sar-emphasis-color);

  --sar-tabs-tab-padding-x: 32rpx;

  --sar-tabs-pill-tab-height: 60rpx;
  --sar-tabs-pill-current-tab-bg: var(--sar-primary);
  --sar-tabs-pill-current-tab-color: var(--sar-white);

  --sar-tabs-card-tab-height: 60rpx;
  --sar-tabs-card-theme-color: var(--sar-primary);
  --sar-tabs-card-border-radius: var(--sar-rounded);

  --sar-tabs-line-width: 80rpx;
  --sar-tabs-line-height: 6rpx;
  --sar-tabs-line-bg: var(--sar-primary);
  --sar-tabs-line-transition-duration: var(--sar-duration);
}

Released under the MIT License.

Copyright © 2023-present wuzhitao