Tab 選項卡
2018-05-25 21:35 更新
調(diào)用方式
- 通過自定義屬性調(diào)用
- 通過 JavaScript 調(diào)用
相關(guān)資料
Material Design Tab 選項卡設(shè)計規(guī)范
樣式
基礎(chǔ)樣式
下面是一個標(biāo)準(zhǔn)選項卡。在手機(jī)上時會占據(jù) 100% 的寬度，每一個選項寬度都相等；在平板/PC 上會左對齊。
可滾動
在 <div class="mdui-tab"> 上添加類 .mdui-tab-scrollable 使選項卡可以橫向滾動，用于選項較多的場景。
居中對齊
在 <div class="mdui-tab"></div> 元素上添加類 .mdui-tab-centered 可使選項卡在平板/PC 上居中對齊。
100% 寬度
在 <div class="mdui-tab"></div> 元素上添加類 .mdui-tab-full-width 可以使選項卡始終占據(jù) 100% 的寬度，且每個選項卡寬度相等。
含圖標(biāo)
含圖標(biāo)和文本
含背景色
在 <div class="mdui-tab"></div> 的元素上添加類 .mdui-color-[color] 即可為選項卡賦予背景色。
默認(rèn)激活的選項
在 <a> 元素上添加類 .mdui-tab-active 可以使該選項處于默認(rèn)激活狀態(tài)。
禁用狀態(tài)的選項
在 <a> 元素上添加 disabled 屬性可以禁用該選項。
調(diào)用方式
通過自定義屬性調(diào)用
使用該方式無需編寫 JavaScript 代碼，只需在元素 <div class="mdui-tab"></div> 上添加 mdui-tab="options" 屬性即可激活該組件。
<div class="mdui-tab" mdui-tab>
...
</div>通過 JavaScript 調(diào)用
實例化組件：
// selector 為 .mdui-tab 元素的 CSS 選擇器或 DOM 元素
// options 為插件的參數(shù)，見下面的參數(shù)列表
var inst = new mdui.Tab(selector, options);參數(shù)
| 參數(shù)名 | 類型 | 默認(rèn)值 | 描述 |
| trigger | string | click | 切換選項卡的觸發(fā)方式。默認(rèn)為 click
|
| loop | boolean | false | 是否啟用循環(huán)切換，若為 true，則最后一個選項激活時調(diào)用 next 方法將回到第一個選項，第一個選項激活時調(diào)用 prev 方法將回到最后一個選項。 |
方法
| 方法名 | 描述 |
| prev() | 切換到上一個選項 |
| next() | 切換到下一個選項 |
| show(index) | 顯示指定的選項。
|
| handleUpdate() | 當(dāng)父元素的寬度發(fā)生變化時，需要調(diào)用該方法重新設(shè)置指示器位置。 |
事件
| 事件名 | 描述 | 目標(biāo) | 參數(shù) |
| change.mdui.tab | 切換選項時，事件將被觸發(fā)。 | <div class="mdui-tab"> |
|
| show.mdui.tab | 切換到指定選項時，事件將被觸發(fā)。 | <a> | event.detail.inst：實例 |
CSS 類名列表
| 類名 | 效果 |
| .mdui-tab | 定義一個選項卡組件。 |
| .mdui-tab-scrollable | 可滾動選項卡組件。 |
| .mdui-tab-centered | 居中對齊的選項卡組件。 |
| .mdui-tab-full-width | 100% 寬度的選項卡組件。 |
| .mdui-tab-active | 激活狀態(tài)的選項。 |
以上內(nèi)容是否對您有幫助：
更多建議：