支持简单模式，即不指定icon，label将垂直居中显示。
默认定位为 absolute，适用于 100%页面布局，如果你并非 100% 布局(可以配合使用 view-box 组件)，请手动重置样式为 position: fixed
tabbar
tabbar
Props
| name | type | default | description | required version |
| icon-class | string | icon's classname | -- |
Events
| name | params | description | required version |
| @on-index-change | -- | emits when value is changed | v2.5.4 |
Slots
| name | description | required version |
| default | slot for tabbar items | -- |
tabbar-item
Variables
tabbar-item
Props
| name | type | default | description | required version |
| selected | boolean | false | if selected, you can also use v-model="index" on tabbar to set item selected | -- |
| badge | string | badge text, if not specified, the badge will not show | -- | |
| show-dot | boolean | false | if show the red dot | -- |
| link | string | the url for current tabbar item, can be a url or a vue-router link value | -- | |
| icon-class | string | the classname for current icon, if tabbar and tabbar-item both specify icon-class, tabbar-item's will be usePulldown | -- |
Events
| name | params | description | required version |
| @on-item-click | -- | emits when tabbar item is clicked | -- |
Slots
| name | description | required version |
| icon | icon area | -- |
| icon-active | will show when current item is activated | v2.1.1-rc.8 |
| label | label text | -- |
Variables
| name | default | description | inherited name |
| @tabbar-text-active-color | #09BB07 | -- | |
| @tabbar-index | 100 | -- |
Changelog
Releases
- v2.7.7 [fix] fix tabbar-item ssr rendering issue
- v2.7.4 [enhance] add development tip for position usage
- v2.5.5 [feature] Support replace: true for link #1761
- v2.5.4 [feature] Add event:on-index-change #1715
- v2.1.1-rc.8 [feature] Support slot:active-icon
- v2.1.1-rc.4 [fix] fix this.$slots undefined #1000 @asingingfish
- v2.1.1-rc.1 [fix] fix variable @tabbar-text-active-color #982 @marsal1212