Mint UI 面板- Tab Container
2021-09-06 15:21 更新
面板，可切換顯示子頁面。
引入
import { TabContainer, TabContainerItem } from 'mint-ui';
Vue.component(TabContainer.name, TabContainer);
Vue.component(TabContainerItem.name, TabContainerItem);
例子
改變 ?ative? 的值，與 ?<tab-container-item>? 的? id? 一致即顯示對應(yīng)頁面。
<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
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| value | 當(dāng)前激活的 id | * | ||
| swipeable | 顯示滑動效果 | Boolean | false |
tab-container-item
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| id | item 的 id | * |
Slot
tab-container
| name | 描述 |
|---|---|
| - | 內(nèi)容 |
tab-container-item
| name | 描述 |
|---|---|
| - | 內(nèi)容 |
實(shí)例演示
以上內(nèi)容是否對您有幫助：
更多建議：