07_Container

tab-container

面板，可切換顯示子頁面。

---

引入

import { TabContainer, TabContainerItem } from 'mint-ui'; Vue.component(TabContainer.name, TabContainer); Vue.component(TabContainerItem.name, TabContainerItem); 

例子

改變 ative 的值，與 <tab-container-item> 的 id 一致即顯示對應頁面。

<mt-tab-container v-model="active"> <mt-tab-container-item id="tab-container1"> <mt-cell v-for="n in 10" title="tab-container 1"></mt-cell> </mt-tab-container-item> <mt-tab-container-item id="tab-container2"> <mt-cell v-for="n in 5" title="tab-container 2"></mt-cell> </mt-tab-container-item> <mt-tab-container-item id="tab-container3"> <mt-cell v-for="n in 7" title="tab-container 3"></mt-cell> </mt-tab-container-item> </mt-tab-container> 

API

tab-container

參數	說明	類型	可選值	默認值
value	當前激活的 id	*
swipeable	顯示滑動效果	Boolean		false

tab-container-item

參數	說明	類型	可選值	默認值
id	item 的 id	*

Slot

tab-container

name	描述
-	內容

tab-container-item

name	描述
-	內容