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

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

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:
      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: 图标区域
    label:
      en: label text
      zh-CN: 图标下方文字
  events:
    on-item-click:
      en: emits when tabbar item is clicked
      zh-CN: 点击菜单项时触发