Mint UI 底部選項卡-Tabbar

底部選項卡，點擊 tab 會切換顯示的頁面。依賴 tab-item 組件。

引入

import { Tabbar, TabItem } from 'mint-ui';

Vue.component(Tabbar.name, Tabbar);
Vue.component(TabItem.name, TabItem);

例子

搭配 tab-container 組件使用

<mt-tabbar v-model="selected">
  <mt-tab-item id="外賣">
    <img slot="icon" src="../assets/100x100.png">
    外賣
  </mt-tab-item>
  <mt-tab-item id="訂單">
    <img slot="icon" src="../assets/100x100.png">
    訂單
  </mt-tab-item>
  <mt-tab-item id="發(fā)現">
    <img slot="icon" src="../assets/100x100.png">
    發(fā)現
  </mt-tab-item>
  <mt-tab-item id="我的">
    <img slot="icon" src="../assets/100x100.png">
    我的
  </mt-tab-item>
</mt-tabbar>

API

tabbar

tab-item

Slot

tabbar

tab-item