# TabBar 标签栏 ### 介绍底部导航常用场景 ### 安装 ``` javascript 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); ``` ### 基础用法 ``` html

``` ``` javascript setup() { function tabSwitch(item: object, index: number) { console.log(item, index); } return { tabSwitch, }; }, ``` ### 路由跳转 ``` html

``` ### 自定义图片链接 ```html

``` ### 自定义选中 ``` html

``` ``` javascript setup() { const active = ref(2) return { active }; }, ``` ### 徽标提示 ``` html

``` ### 自定义颜色 ``` html

``` ### 自定义Icon 如果需要在现有 Icon 的基础上使用更多图标，请参考icon组件自定义图标引入。 ``` html

``` ### 三个图标的标签栏 ``` html

``` ### 固定底部，可自由跳转 ``` html

``` ### Prop ### nut-tabbar | 字段 | 说明 | 类型 | 默认值 | |-----------------|--------------------|--------|---------| | v-model:visible | 选中标签的索引值 | number | 0 | | bottom | 是否固定在页面底部 | Booble | false | | size | icon的尺寸/图片的宽高 | string | '20px' | | unactive-color | icon未激活的颜色 | string | #7d7e80 | | active-color | icon激活的颜色 | string | #1989fa | ### tabbar-item | 字段 | 说明 | 类型 | 默认值 | |-----------|-------------------------------------------|--------|--------| | tab-title | 标签页的标题 | String | -- | | icon | 标签页显示的[图标名称](#/icon) | String | -- | | font-class-name | 自定义icon 字体基础类名 | String | `nutui-iconfont` | | class-prefix | 自定义icon 类名前缀，用于使用自定义图标 | String | `nut-icon` | | img | 标签页显示图片链接 | String | -- | | activeImg | 激活以后的标签页显示图片链接（同一个item中icon和img只能选择一个） | String | -- | | href | 标签页的跳转链接 | String | -- | | to `小程序不支持` | 标签页的路由对象，等于 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) 属性 | String｜Object | -- | | num | 页签右上角的数字角标，超出99之后为99+ | Number | -- | ### Event | 事件名称 | 说明 | 回调参数 | |------------|--------------------|--------------------| | tab-switch | 切换页签时触发事件 | 点击的数据和索引值 |