# TabBar 标签栏 ### 介绍底部导航常用场景 ### 安装 ``` javascript import { createApp } from 'vue'; //vue import { Tabbar, TabbarItem, Icon } from '@nutui/nutui'; //taro import { Tabbar, TabbarItem, Icon } from '@nutui/nutui-taro'; const app = createApp(); app.use(Tabbar); app.use(TabbarItem); ``` ### 基础用法如果需要在现有 Icon 的基础上使用更多图标，请参考icon组件自定义图标引入。 :::demo ```html ``` ::: ### 通过名称匹配 :::demo ```html ``` ::: ### 自定义图片链接 :::demo ```html ``` ::: ### 自定义选中 :::demo ```html ``` ::: ### 徽标提示 :::demo ```html ``` ::: ### 自定义颜色 :::demo ```html ``` ::: ### 三个图标的标签栏 :::demo ```html ``` ::: ### 固定底部，可自由跳转 :::demo ```html ``` ::: ### Prop ### nut-tabbar | 字段 | 说明 | 类型 | 默认值 | |-----------------|--------------------|--------|---------| | v-model:visible | 选中标签的索引值 | number | 0 | | bottom | 是否固定在页面底部 | boolean | false | | size | icon的尺寸/图片的宽高 | string | '20px' | | unactive-color | icon未激活的颜色 | string | #7d7e80 | | active-color | icon激活的颜色 | string | #1989fa | | safe-area-inset-bottom | 是否开启iphone系列全面屏底部安全区适配 | boolean | false | ### tabbar-item | 字段 | 说明 | 类型 | 默认值 | |-----------|-------------------------------------------|--------|--------| | tab-title | 标签页的标题 | string | -- | | name| 标签名称，作为匹配的标识符 | string | 当前标签的索引值 | | icon | 标签页显示的[图标名称](#/icon) | string | -- | | font-class-name | 自定义icon 字体基础类名 | string | `nutui-iconfont` | | class-prefix | 自定义icon 类名前缀，用于使用自定义图标 | string | `nut-icon` | | img | 标签页显示图片链接 | String | -- | | active-img | 激活以后的标签页显示图片链接（同一个item中icon和img只能选择一个） | string | -- | | href | 标签页的跳转链接；如果同时存在 `to`，优先级高于 `to` | string | -- | | to `小程序不支持` | 标签页的路由对象，等于 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) 属性 | string｜object | -- | | num | 页签右上角的数字角标，超出99之后为99+ | number | -- | | dot | 是否显示图标右上角小红点 | boolean | false | ### Event | 事件名称 | 说明 | 回调参数 | |------------|--------------------|--------------------| | tab-switch | 切换页签时触发事件 | 点击的数据和索引值 |