category:
  en: Navigation
  zh-CN: 导航
icon: ''
items:
  - tabbar
  - tabbar-item
import_code: "import { Tabbar, TabbarItem } from 'vux'"
extra: |
  支持简单模式，即不指定`icon`，`label`将垂直居中显示。

  ::: warning
  默认定位为 `absolute`，适用于 `100%页面布局`，如果你并非 100% 布局(可以配合使用 view-box 组件)，请手动重置样式为 `position: fixed`
  :::

tags:
  en:
    - tabbar
  zh-CN:
    - 导航
tabbar:
  props:
    icon-class:
      en: icon's classname
      zh-CN: 图标的class名
  slots:
    default:
      en: slot for tabbar items
      zh-CN: tabbar主体内容，只允许tabbar-item
  events:
    on-index-change:
      version: v2.5.4
      en: emits when value is changed
      zh-CN: value 值变化时触发
tabbar-item:
  props:
    selected:
      type: Boolean
      default: false
      en: 'if selected, you can also use `v-model="index"` on tabbar to set item selected'
      zh-CN: '是否选中当前项，你也可以使用`v-model`来指定选中的`tabbar-item`的`index`'
    badge:
      en: badge text, if not specified, the badge will not show
      zh-CN: 徽标文字，不指定则不显示
    show-dot:
      type: Boolean
      default: false
      en: if show the red dot
      zh-CN: 是否显示红点
    link:
      en: the url for current tabbar item, can be a url or a `vue-router` link value
      zh-CN: 链接，可以为普通url或者用`vue-link`的路径写法，使用 object 写法指定 replace 为 true 可实现 replace 跳转
    icon-class:
      en: the classname for current icon, if tabbar and tabbar-item both specify icon-class, tabbar-item's will be usePulldown
      zh-CN: 图标类名，如果tabbar也同时定义了icon-class, 会使用tabbar-item的
  slots:
    icon:
      en: icon area
      zh-CN: 图标区域
    icon-active:
      version: v2.1.1-rc.8
      en: will show when current item is activated
      zh-CN: 如果存在，当前 tabbar-item 点击时会显示，用于切换图标
    label:
      en: label text
      zh-CN: 图标下方文字
  events:
    on-item-click:
      en: emits when tabbar item is clicked
      zh-CN: 点击菜单项时触发
changes:
  v2.7.7:
    en:
      - '[fix] fix tabbar-item ssr rendering issue'
    zh-CN:
      - '[fix] 修复 tabbar-item 服务端渲染不一致问题'
  v2.7.4:
    en:
      - '[enhance] add development tip for position usage'
    zh-CN:
      - '[enhance] 开发模式下对于非 100% 布局使用显示 absolute 定位说明'
  v2.5.5:
    en:
      - '[feature] Support replace: true for link #1761'
    zh-CN:
      - '[feature] 支持 link 上使用 replace: true 写法 #1761'
  v2.5.4:
    en:
      - '[feature] Add event:on-index-change #1715'
    zh-CN:
      - '[feature] 增加事件 on-index-change #1715'
  v2.1.1-rc.8:
    en:
      - '[feature] Support slot:active-icon'
    zh-CN:
      - '[feature] 支持点击时切换图标'
  v2.1.1-rc.4:
    en:
      - '[fix] fix this.$slots undefined #1000 @asingingfish'
    zh-CN:
      - '[fix] 修复 this.$slots 不存在 #1000 @asingingfish'
  v2.1.1-rc.1:
    en:
      - '[fix] fix variable @tabbar-text-active-color #982 @marsal1212'
    zh-CN:
      - '[fix] 修复 less 变量 @tabbar-text-active-color #982 @marsal1212'