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