可擴(kuò)展面板
2018-05-25 00:45 更新
toggle(item)調(diào)用方式
- 通過(guò)自定義屬性調(diào)用
- 通過(guò) JavaScript 調(diào)用
相關(guān)閱讀
Material Design 可擴(kuò)展面板設(shè)計(jì)規(guī)范
樣式
完整 HTML 結(jié)構(gòu)
這個(gè)示例包含了所有可以包含的 HTML 元素。
最簡(jiǎn) HTML 結(jié)構(gòu)
上例中的部分元素并不是必須的，下面的示例只包含必須的 HTML 元素。
默認(rèn)打開(kāi)的面板項(xiàng)
在 <div class="mdui-panel-item"></div> 元素上添加類 .mdui-panel-item-open 即可使該面板項(xiàng)處于默認(rèn)打開(kāi)狀態(tài)。
移除面板間距
在 <div class="mdui-panel"></div> 元素上添加類 .mdui-panel-gapless 即可移除打開(kāi)的面板和其他面板之間的間距。
彈出面板
在 <div class="mdui-panel"></div> 元素上添加類 .mdui-panel-popout 即可使打開(kāi)的面板有彈出效果。
面板嵌套
可擴(kuò)展面板可以互相嵌套。
調(diào)用方式
通過(guò)自定義屬性調(diào)用
使用該方式無(wú)需編寫 JavaScript 代碼。只需在 <div class="mdui-panel"></div> 元素上添加 mdui-panel="options" 屬性即可激活該插件。
通過(guò) JavaScript 調(diào)用
實(shí)例化組件：
// selector 為 .mdui-panel 元素的 CSS 選擇器或 DOM 元素
// options 為插件的參數(shù)，見(jiàn)下面的參數(shù)列表
var inst = new mdui.Panel(selector, options);參數(shù)
| 參數(shù)名 | 類型 | 默認(rèn)值 | 描述 |
| accordion | boolean | false | 是否啟用手風(fēng)琴效果。
|
方法
| 方法名 | 描述 |
| open(item) | 打開(kāi)面板項(xiàng)。
|
| close(item) | 關(guān)閉面板項(xiàng)。
|
| toggle(item) | 切換面板項(xiàng)狀態(tài)。
|
| openAll() | 打開(kāi)所有面板項(xiàng)。該方法僅在 accordion 為 false 時(shí)有效。 |
| closeAll() | 關(guān)閉所有面板項(xiàng)。 |
事件
| 事件 | 描述 | 目標(biāo) | 參數(shù) |
| open.mdui.panel | 面板項(xiàng)開(kāi)始打開(kāi)動(dòng)畫時(shí)，事件將被觸發(fā)。 | <div class="mdui-panel-item"></div> | event.detail.inst：實(shí)例 |
| opened.mdui.panel | 面板項(xiàng)結(jié)束打開(kāi)動(dòng)畫時(shí)，事件將被觸發(fā)。 | <div class="mdui-panel-item"></div> | event.detail.inst：實(shí)例 |
| close.mdui.panel | 面板項(xiàng)開(kāi)始關(guān)閉動(dòng)畫時(shí)，事件將被觸發(fā)。 | <div class="mdui-panel-item"></div> | event.detail.inst：實(shí)例 |
| closed.mdui.panel | 面板項(xiàng)結(jié)束關(guān)閉動(dòng)畫時(shí)，事件將被觸發(fā)。 | <div class="mdui-panel-item"></div> | event.detail.inst：實(shí)例 |
CSS 類名列表
| 類名 | 效果 |
| .mdui-panel | 定義一個(gè)可擴(kuò)展面板。 |
| .mdui-panel-gapless | 移除打開(kāi)的面板和其他面板之間的間距。 |
| .mdui-panel-popout | 使打開(kāi)的面板具有彈出效果。 |
| .mdui-panel-item | 定義一個(gè)可擴(kuò)展面板的面板項(xiàng)。 |
| .mdui-panel-item-open | 使面板項(xiàng)默認(rèn)打開(kāi)。 |
| .mdui-panel-item-header | 定義一個(gè)面板項(xiàng)的頭部。 |
| .mdui-panel-item-title | 定義面板項(xiàng)頭部的標(biāo)題。 |
| .mdui-panel-item-summary | 定義面板項(xiàng)頭部的概要。 |
| .mdui-panel-item-arrow | 定義面板項(xiàng)的展開(kāi)收起圖標(biāo)。 |
| .mdui-panel-item-body | 定義面板項(xiàng)內(nèi)容。 |
| .mdui-panel-item-actions | 定義面板項(xiàng)的操作欄。 |
以上內(nèi)容是否對(duì)您有幫助：
← 分隔線
更多建議：