import{e as a,o as t,G as n}from"./vendor.js";const l={class:"markdown-body"},p=n(`

Tabbar \u6807\u7B7E\u680F

\u4ECB\u7ECD

\u5E95\u90E8\u5BFC\u822A\u5E38\u7528\u573A\u666F

\u5B89\u88C5

import { createApp } from 'vue';
//vue
import { Tabbar,TabbarItem } from '@nutui/nutui';
//taro
import { Tabbar,TabbarItem } from '@nutui/nutui-taro';

const app = createApp();
app.use(Tabbar);
app.use(TabbarItem);

\u57FA\u7840\u7528\u6CD5

<nut-tabbar @tab-switch="tabSwitch">
  <nut-tabbar-item tab-title="\u9996\u9875" icon="home"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u5206\u7C7B" icon="category"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u53D1\u73B0" icon="find"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u8D2D\u7269\u8F66" icon="cart"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u6211\u7684" icon="my"></nut-tabbar-item>
</nut-tabbar>

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

\u8DEF\u7531\u8DF3\u8F6C

<nut-tabbar @tab-switch="tabSwitch">
  <nut-tabbar-item tab-title="\u9996\u9875" icon="home" to="/home"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u5206\u7C7B" icon="category" :to="{ path: '/home', query: { plan: 'private' }}"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u53D1\u73B0" icon="find"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u8D2D\u7269\u8F66" icon="cart"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u6211\u7684" icon="my"></nut-tabbar-item>
</nut-tabbar>

\u81EA\u5B9A\u4E49\u56FE\u7247\u94FE\u63A5

<nut-tabbar @tab-switch="tabSwitch">
  <nut-tabbar-item tab-title="\u9996\u9875"
          img= 'http://img13.360buyimg.com/uba/jfs/t1/29316/38/1115/3203/5c0f3d61E35d0c7da/9e557f2cb5c9dab6.jpg'
           activeImg='http://img20.360buyimg.com/uba/jfs/t1/9996/36/8646/4833/5c0f3d61E7c1b7e0f/c98ad61124172e93.jpg'
      ></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u5206\u7C7B" 
          img="http://img12.360buyimg.com/uba/jfs/t1/25443/23/1062/4600/5c0f3d61E2e9f1360/c9b3421fe18614e2.jpg"
          activeImg='http://img20.360buyimg.com/uba/jfs/t1/19241/12/1048/8309/5c0f3d61E17ed5a56/c3af0964cade47f8.jpg'
      ></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u53D1\u73B0" 
          img="http://img13.360buyimg.com/uba/jfs/t1/10361/35/4713/4643/5c0f3d62E437a3c94/273fd0fb90798f03.jpg"
          activeImg='http://img14.360buyimg.com/uba/jfs/t1/26604/35/1073/7896/5c0f3d61Eb9f5f184/5f01c938abe4216d.jpg'
      ></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u8D2D\u7269\u8F66" 
         img="http://img11.360buyimg.com/uba/jfs/t1/14848/18/1066/3723/5c0f41bdE9f2a38fe/e6ed6768717297fb.jpg"
         activeImg='http://img30.360buyimg.com/uba/jfs/t1/17538/16/1070/6214/5c0f41bdE4bc9a1db/74cf978e5015454b.jpg'
      ></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u6211\u7684" 
         img="http://img20.360buyimg.com/uba/jfs/t1/20004/20/1045/3620/5c0f3d61Eaaec1670/9e59db63983b7b9f.jpg"
         activeImg='http://img14.360buyimg.com/uba/jfs/t1/23967/14/1072/6714/5c0f3d61E0ad8991e/8f741953f6e38f15.jpg'
      ></nut-tabbar-item>
</nut-tabbar>

\u81EA\u5B9A\u4E49\u9009\u4E2D

<nut-tabbar v-model:visible="active">
  <nut-tabbar-item tab-title="\u9996\u9875" icon="home"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u5206\u7C7B" icon="category"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u53D1\u73B0" icon="find"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u8D2D\u7269\u8F66" icon="cart"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u6211\u7684" icon="my"></nut-tabbar-item>
</nut-tabbar>

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

\u5FBD\u6807\u63D0\u793A

<nut-tabbar>
  <nut-tabbar-item tab-title="\u9996\u9875" icon="home" num="11"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u5206\u7C7B" icon="category"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u53D1\u73B0" icon="find"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u8D2D\u7269\u8F66" icon="cart" num="110"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u6211\u7684" icon="my"></nut-tabbar-item>
</nut-tabbar>

\u81EA\u5B9A\u4E49\u989C\u8272

<nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
  <nut-tabbar-item tab-title="\u9996\u9875" icon="home"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u5206\u7C7B" icon="category"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u53D1\u73B0" icon="find"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u8D2D\u7269\u8F66" icon="cart"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u6211\u7684" icon="my"></nut-tabbar-item>
</nut-tabbar>

\u81EA\u5B9A\u4E49Icon

\u5982\u679C\u9700\u8981\u5728\u73B0\u6709 Icon \u7684\u57FA\u7840\u4E0A\u4F7F\u7528\u66F4\u591A\u56FE\u6807\uFF0C\u8BF7\u53C2\u8003icon\u7EC4\u4EF6\u81EA\u5B9A\u4E49\u56FE\u6807\u5F15\u5165\u3002

<nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
  <nut-tabbar-item tab-title="\u9996\u9875" font-class-name="iconfont" class-prefix="icon" icon="home"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u5206\u7C7B" font-class-name="iconfont" class-prefix="icon"  icon="category"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u53D1\u73B0" font-class-name="iconfont" class-prefix="icon"  icon="find"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u8D2D\u7269\u8F66" font-class-name="iconfont" class-prefix="icon"  icon="cart"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u6211\u7684" font-class-name="iconfont" class-prefix="icon" icon="my"></nut-tabbar-item>
</nut-tabbar>

\u4E09\u4E2A\u56FE\u6807\u7684\u6807\u7B7E\u680F

<nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
  <nut-tabbar-item tab-title="\u9996\u9875" icon="home"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u5206\u7C7B" icon="category"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u53D1\u73B0" icon="find"></nut-tabbar-item>
</nut-tabbar>

\u56FA\u5B9A\u5E95\u90E8\uFF0C\u53EF\u81EA\u7531\u8DF3\u8F6C

<nut-tabbar :bottom="true">
  <nut-tabbar-item tab-title="\u9996\u9875" href="" icon="home"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u5206\u7C7B" icon="category"></nut-tabbar-item>
  <nut-tabbar-item tab-title="\u53D1\u73B0" icon="find"></nut-tabbar-item>
  <nut-tabbar-item
    tab-title="\u8D2D\u7269\u8F66"
    href="https://m.jd.com"
    icon="cart"
  ></nut-tabbar-item>
  <nut-tabbar-item
    tab-title="\u6211\u7684"
    href="######"
    icon="my"
  ></nut-tabbar-item>
</nut-tabbar>

Prop

nut-tabbar

\u5B57\u6BB5\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
v-model:visible\u9009\u4E2D\u6807\u7B7E\u7684\u7D22\u5F15\u503Cnumber0
bottom\u662F\u5426\u56FA\u5B9A\u5728\u9875\u9762\u5E95\u90E8Booblefalse
sizeicon\u7684\u5C3A\u5BF8/\u56FE\u7247\u7684\u5BBD\u9AD8string\u201820px\u2019
unactive-coloricon\u672A\u6FC0\u6D3B\u7684\u989C\u8272string#7d7e80
active-coloricon\u6FC0\u6D3B\u7684\u989C\u8272string#1989fa

tabbar-item

\u5B57\u6BB5\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
tab-title\u6807\u7B7E\u9875\u7684\u6807\u9898String\u2013
icon\u6807\u7B7E\u9875\u663E\u793A\u7684\u56FE\u6807\u540D\u79F0String\u2013
font-class-name\u81EA\u5B9A\u4E49icon \u5B57\u4F53\u57FA\u7840\u7C7B\u540DStringnutui-iconfont
class-prefix\u81EA\u5B9A\u4E49icon \u7C7B\u540D\u524D\u7F00\uFF0C\u7528\u4E8E\u4F7F\u7528\u81EA\u5B9A\u4E49\u56FE\u6807Stringnut-icon
img\u6807\u7B7E\u9875\u663E\u793A\u56FE\u7247\u94FE\u63A5String\u2013
activeImg\u6FC0\u6D3B\u4EE5\u540E\u7684\u6807\u7B7E\u9875\u663E\u793A\u56FE\u7247\u94FE\u63A5\uFF08\u540C\u4E00\u4E2Aitem\u4E2Dicon\u548Cimg\u53EA\u80FD\u9009\u62E9\u4E00\u4E2A\uFF09String\u2013
href\u6807\u7B7E\u9875\u7684\u8DF3\u8F6C\u94FE\u63A5String\u2013
to \u5C0F\u7A0B\u5E8F\u4E0D\u652F\u6301\u6807\u7B7E\u9875\u7684\u8DEF\u7531\u5BF9\u8C61\uFF0C\u7B49\u4E8E vue-router \u7684 to \u5C5E\u6027 \u5C5E\u6027String\uFF5CObject\u2013
num\u9875\u7B7E\u53F3\u4E0A\u89D2\u7684\u6570\u5B57\u89D2\u6807\uFF0C\u8D85\u51FA99\u4E4B\u540E\u4E3A99+Number\u2013

Event

\u4E8B\u4EF6\u540D\u79F0\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
tab-switch\u5207\u6362\u9875\u7B7E\u65F6\u89E6\u53D1\u4E8B\u4EF6\u70B9\u51FB\u7684\u6570\u636E\u548C\u7D22\u5F15\u503C
`,33),c=[p],i={setup(h,{expose:s}){return s({frontmatter:{}}),(j,e)=>(t(),a("div",l,c))}};export{i as default};