Cool Unix

主题

H5预览

APP下载

Tabs 标签页 ​

用于在不同内容区域之间进行切换的标签页组件，支持横向滚动、填充布局等多种展示方式。

基础参数 ​

参数说明类型可选值默认值
pt样式穿透配置PassThrough--
modelValue当前选中标签的值number | string--
height标签容器高度number | string-80
list标签数据列表ClTabsItem[]-[]
fill是否横向填充标签boolean-true
gutter标签之间的间距number-30
color选中状态的文字颜色string--
unColor未选中状态文字颜色string--
showLine是否显示底部下划线boolean-true
showSlider是否显示滑块背景boolean-false
disabled是否禁用整个组件boolean-false

事件 ​

事件名称说明回调参数
change标签切换时触发事件value: string | number

PassThrough ​

样式穿透配置允许您自定义组件内部各个元素的样式，实现更灵活的外观定制。

参数说明类型
className组件根元素样式string
text标签文本配置PassThroughProps
item单个标签配置PassThroughProps
line底部下划线配置PassThroughProps
slider滑块背景配置PassThroughProps

示例 ​

基础用法 ​

最基本的标签页用法，支持横向滚动。

提示

list 属性必须明确定义类型为 ClTabsItem[]，这是为了确保在 APP 端的兼容性。

vue
<cl-tabs v-model="val" :list="list"></cl-tabs>

<script lang="ts" setup>
import type { ClTabsItem } from "@/uni_modules/cool-ui";
import { ref } from "vue";

const val = ref("1");

const list = ref<ClTabsItem[]>([
  {
    label: "Vue",
    value: "1",
  },
  {
    label: "React",
    value: "2",
  },
  {
    label: "Angular",
    value: "3",
  },
  {
    label: "Svelte",
    value: "4",
  },
  {
    label: "Jquery",
    value: "5",
  },
  {
    label: "Vuex",
    value: "6",
  },
  {
    label: "Vue Router",
    value: "7",
  },
  {
    label: "Pinia",
    value: "8",
  },
]);
</script>

横向填充 ​

当标签数量较少时，可以使用 fill 属性让标签平均分布填充整个容器宽度。

vue
<cl-tabs v-model="val" :list="list" fill></cl-tabs>

<script lang="ts" setup>
import type { ClTabsItem } from "@/uni_modules/cool-ui";
import { ref } from "vue";

const val = ref("1");

const list = ref<ClTabsItem[]>([
  {
    label: "Vue",
    value: "1",
  },
  {
    label: "React",
    value: "2",
  },
  {
    label: "Angular",
    value: "3",
  },
  {
    label: "Svelte",
    value: "4",
  },
]);
</script>

居中布局 ​

通过外层容器的样式控制，可以实现标签页的居中显示效果。

vue
<view class="flex flex-row justify-center">
    <cl-tabs v-model="val" :list="list"></cl-tabs>
</view>

<script lang="ts" setup>
import type { ClTabsItem } from "@/uni_modules/cool-ui";
import { ref } from "vue";

const val = ref("1");

const list = ref<ClTabsItem[]>([
  {
    label: "Vue",
    value: "1",
  },
  {
    label: "React",
    value: "2",
  },
  {
    label: "Angular",
    value: "3",
  },
  {
    label: "Svelte",
    value: "4",
  },
]);
</script>

单个标签禁用 ​

通过在标签数据中设置 disabled: true 可以禁用特定的标签项。

vue
<view class="flex flex-row justify-center">
    <cl-tabs v-model="val" :list="list"></cl-tabs>
</view>

<script lang="ts" setup>
import type { ClTabsItem } from "@/uni_modules/cool-ui";
import { ref } from "vue";

const val = ref("1");

const list = ref<ClTabsItem[]>([
  {
    label: "Vue",
    value: "1",
  },
  {
    label: "React",
    value: "2",
    disabled: true, // 禁用此标签
  },
  {
    label: "Angular",
    value: "3",
  },
  {
    label: "Svelte",
    value: "4",
    disabled: true, // 禁用此标签
  },
]);
</script>

自定义颜色主题 ​

可以通过 color 和 un-color 属性自定义选中和未选中状态的文字颜色。

vue
<view class="flex flex-row justify-center">
    <cl-tabs v-model="val" :list="list" color="red" un-color="#ccc"></cl-tabs>
</view>

<script lang="ts" setup>
import type { ClTabsItem } from "@/uni_modules/cool-ui";
import { ref } from "vue";

const val = ref("1");

const list = ref<ClTabsItem[]>([
  {
    label: "Vue",
    value: "1",
  },
  {
    label: "React",
    value: "2",
  },
  {
    label: "Angular",
    value: "3",
  },
  {
    label: "Svelte",
    value: "4",
  },
]);
</script>

滑块背景模式 ​

启用 show-slider 可以显示滑块背景效果，配合样式穿透可以调整内边距等样式。

vue
<cl-tabs
  v-model="val"
  :list="list"
  show-slider
  :pt="{
    className: '!p-2',
  }"
></cl-tabs>

<script lang="ts" setup>
import type { ClTabsItem } from "@/uni_modules/cool-ui";
import { ref } from "vue";

const val = ref("1");

const list = ref<ClTabsItem[]>([
  {
    label: "Vue",
    value: "1",
  },
  {
    label: "React",
    value: "2",
  },
  {
    label: "Angular",
    value: "3",
  },
  {
    label: "Svelte",
    value: "4",
  },
]);
</script>