Tabbar 标签栏组件

介绍

底部导航常用场景

安装

import { createApp } from 'vue';
import { Tabbar,Icon } from '@nutui/nutui';
const app = createApp();
app.use(Tabbar).use(Icon);

代码示例

基础用法

<nut-tabbar @tab-switch="tabSwitch">
  <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
  <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
  <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
  <nut-tabbar-item tab-title="购物车" icon="cart"></nut-tabbar-item>
  <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
</nut-tabbar>

setup() {
  function tabSwitch(item: object, index: number) {
    console.log(item, index);
  }
  return {
    tabSwitch,
  };
},

自定义选中

<nut-tabbar v-model:visible="active">
  <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
  <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
  <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
  <nut-tabbar-item tab-title="购物车" icon="cart"></nut-tabbar-item>
  <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
</nut-tabbar>

setup() {
  const active = ref(2)
  return {
    active
  };
},

徽标提示

<nut-tabbar>
  <nut-tabbar-item tab-title="首页" icon="home" num="11"></nut-tabbar-item>
  <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
  <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
  <nut-tabbar-item tab-title="购物车" icon="cart" num="110"></nut-tabbar-item>
  <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
</nut-tabbar>

自定义颜色

<nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
  <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
  <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
  <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
  <nut-tabbar-item tab-title="购物车" icon="cart"></nut-tabbar-item>
  <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
</nut-tabbar>

三个图标的标签栏

<nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
  <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
  <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
  <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
</nut-tabbar>

固定底部，可自由跳转

<nut-tabbar :bottom="true">
  <nut-tabbar-item tab-title="首页" href="" icon="home"></nut-tabbar-item>
  <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
  <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
  <nut-tabbar-item
    tab-title="购物车"
    href="https://m.jd.com"
    icon="cart"
  ></nut-tabbar-item>
  <nut-tabbar-item
    tab-title="我的"
    href="######"
    icon="my"
  ></nut-tabbar-item>
</nut-tabbar>

Prop

nut-tabbar

tabbar-item

Event