Appearance

iuiDesign
100%
02:32
本页目录

用于在不同功能模块之间进行快速切换，一般位于页面底部。

基本使用 ​

通过 list 属性来配置标签栏的内容。

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

<script setup>
  const list = [
    {
      icon: "home",
      name: "Home",
    },
    {
      icon: "search",
      name: "Search",
    },
    {
      icon: "user",
      name: "User",
    },
    {
      icon: "setting",
      name: "Setting",
    },
  ];
</script>
<iui-tabbar :list="list"></iui-tabbar>

<script setup>
  const list = [
    {
      icon: "home",
      name: "Home",
    },
    {
      icon: "search",
      name: "Search",
    },
    {
      icon: "user",
      name: "User",
    },
    {
      icon: "setting",
      name: "Setting",
    },
  ];
</script>

徽标提示 ​

通过 badge 属性来配置徽标提示的内容。

html
<iui-tabbar :list="badge"></iui-tabbar>

<script setup>
  const badge = [
    {
      icon: "home",
      name: "Home",
    },
    {
      icon: "search",
      name: "Search",
      badge: {
        text: 100,
        max: 99,
      },
    },
    {
      icon: "user",
      name: "User",
      badge: {
        text: 2,
      },
    },
    {
      icon: "setting",
      name: "Setting",
      badge: {
        dot: true,
      },
    },
  ];
</script>
<iui-tabbar :list="badge"></iui-tabbar>

<script setup>
  const badge = [
    {
      icon: "home",
      name: "Home",
    },
    {
      icon: "search",
      name: "Search",
      badge: {
        text: 100,
        max: 99,
      },
    },
    {
      icon: "user",
      name: "User",
      badge: {
        text: 2,
      },
    },
    {
      icon: "setting",
      name: "Setting",
      badge: {
        dot: true,
      },
    },
  ];
</script>

悬浮胶囊标签栏 ​

通过 capsule 属性来配置悬浮胶囊标签栏。该模式下将只显示图标，不显示文字。
激活颜色通过 activeColor 属性来配置，会自动根据 activeColor 生成对应的背景颜色。

html
<iui-tabbar activeColor="#00B42A" capsule :list="list"></iui-tabbar>

<script setup>
  const list = [
    {
      icon: "home",
    },
    {
      icon: "search",
    },
    {
      icon: "user",
    },
    {
      icon: "setting",
    },
  ];
</script>
<iui-tabbar activeColor="#00B42A" capsule :list="list"></iui-tabbar>

<script setup>
  const list = [
    {
      icon: "home",
    },
    {
      icon: "search",
    },
    {
      icon: "user",
    },
    {
      icon: "setting",
    },
  ];
</script>

自定义内容 ​

通过 slot 来自定义标签栏的内容。

html
<iui-tabbar :list="slot">
  <template #Send>
    <iui-avatar src="https://example.png"></iui-avatar>
  </template>
</iui-tabbar>

<script setup>
  const slot = [
    {
      icon: "home",
      name: "Home",
    },
    {
      icon: "search",
      name: "Search",
    },
    {
      name: "Send", // name 将会作为 slot 的 name，slot 存在时，优先级最高
    },
    {
      icon: "user",
      name: "User",
    },
    {
      icon: "setting",
      name: "Setting",
    },
  ];
</script>
<iui-tabbar :list="slot">
  <template #Send>
    <iui-avatar src="https://example.png"></iui-avatar>
  </template>
</iui-tabbar>

<script setup>
  const slot = [
    {
      icon: "home",
      name: "Home",
    },
    {
      icon: "search",
      name: "Search",
    },
    {
      name: "Send", // name 将会作为 slot 的 name，slot 存在时，优先级最高
    },
    {
      icon: "user",
      name: "User",
    },
    {
      icon: "setting",
      name: "Setting",
    },
  ];
</script>

API ​

<Tabbar>props
参数描述类型默认值
current当前选中的 tab 的索引Number0
listtab 列表TabItem[][]
activeColor选中的 tab 的颜色String#165DFF
capsule胶囊模式Booleanfalse
<Tabbar>events
事件名描述参数
change点击 tab 时触发TabItem.name | index: Number
<Tabbar>slots
插槽名描述参数
{{ TabItem.name }}自定义 tab -
<TabItem>props
参数描述类型默认值
name标签名String | Number-
icon图标String-
badge徽标属性badge.props-