Appearance

iuiDesign
100%
02:32
本页目录

用于内容分类后的展示切换。

基本使用 ​

标签页的基本使用方法。

html
<iui-tabs :list="list"></iui-tabs>

<script setup>
  const list = [{ title: "Tab1" }, { title: "Tab2" }, { title: "Tab3" }];
</script>
<iui-tabs :list="list"></iui-tabs>

<script setup>
  const list = [{ title: "Tab1" }, { title: "Tab2" }, { title: "Tab3" }];
</script>

固定宽度 ​

标签页默认宽度为自适应，可以通过 tabWidth 属性设置固定宽度。

html
<iui-tabs :list="list" :tabWidth="35"></iui-tabs>
<iui-tabs :list="list" :tabWidth="35"></iui-tabs>

带图标的页签 ​

带有图标的标签页，支持所有内置图标。

html
<iui-tabs :list="iconTab" lineWidth="auto"></iui-tabs>

<script setup>
  const iconTab = [
    {
      title: "Doc",
      icon: "file-text",
    },
    {
      title: "Api",
      icon: "api",
    },
    {
      title: "Setting",
      icon: "setting",
    },
  ];
</script>
<iui-tabs :list="iconTab" lineWidth="auto"></iui-tabs>

<script setup>
  const iconTab = [
    {
      title: "Doc",
      icon: "file-text",
    },
    {
      title: "Api",
      icon: "api",
    },
    {
      title: "Setting",
      icon: "setting",
    },
  ];
</script>

带有徽标的页签 ​

如果需要在页签右上角展示徽标，可以在 list 数组中设置 badge 属性。

html
<iui-tabs :list="badgeTab"></iui-tabs>

<script setup>
  const badgeTab = [
    {
      title: "Tip",
      badge: {
        dot: true,
      },
    },
    {
      title: "Message",
      icon: "message",
      badge: {
        text: 2,
      },
    },
    {
      title: "My",
      icon: "user",
    },
  ];
</script>
<iui-tabs :list="badgeTab"></iui-tabs>

<script setup>
  const badgeTab = [
    {
      title: "Tip",
      badge: {
        dot: true,
      },
    },
    {
      title: "Message",
      icon: "message",
      badge: {
        text: 2,
      },
    },
    {
      title: "My",
      icon: "user",
    },
  ];
</script>

标签样式 ​

Tabs 组件内置了四种样式，分别是 line、dot、tag、card，可通过 type 属性进行切换。

html
<!-- 点模式 -->
<iui-tabs :list="list" type="dot"></iui-tabs>

<!-- 标签模式 -->
<iui-tabs :list="list" type="tag"></iui-tabs>

<!-- 卡片模式 -->
<iui-tabs :list="list" type="card"></iui-tabs>
<!-- 点模式 -->
<iui-tabs :list="list" type="dot"></iui-tabs>

<!-- 标签模式 -->
<iui-tabs :list="list" type="tag"></iui-tabs>

<!-- 卡片模式 -->
<iui-tabs :list="list" type="card"></iui-tabs>

API ​

<Tabs>props
参数描述类型默认值
modelValue当前索引Number0
listtab列表TabItem[][]
type样式类型Stringline
linwWidth滑块线条宽度String | Number20
lineHeight滑块线条高度String | Number2
splittabs与内容区域分割线Booleanfalse
duration动画时长Number240
activeColor选中颜色String#165DFF
tabWidthtab宽度Number-
<Tabs>events
事件名描述参数
change切换tab时触发(index, tabItem)
<TabItem>props
参数描述类型默认值
title标签名String-
icon图标String-
badge徽标属性badge.props-