閱讀(3.2k) 書簽贊(0) 我要糾錯

可擴展面板

2018-05-25 00:45 更新

toggle(item)調(diào)用方式

通過自定義屬性調(diào)用
通過 JavaScript 調(diào)用

相關(guān)閱讀

Material Design 可擴展面板設計規(guī)范

樣式

完整 HTML 結(jié)構(gòu)

這個示例包含了所有可以包含的 HTML 元素。

www.mdui.org - 可擴展面板 - 完整 HTML 結(jié)構(gòu)

最簡 HTML 結(jié)構(gòu)

上例中的部分元素并不是必須的，下面的示例只包含必須的 HTML 元素。

www.mdui.org - 可擴展面板 - 最簡 HTML 結(jié)構(gòu)

默認打開的面板項

在 <div class="mdui-panel-item"></div> 元素上添加類 .mdui-panel-item-open 即可使該面板項處于默認打開狀態(tài)。

www.mdui.org - 可擴展面板 - 默認打開的面板項

移除面板間距

在 <div class="mdui-panel"></div> 元素上添加類 .mdui-panel-gapless 即可移除打開的面板和其他面板之間的間距。

www.mdui.org - 可擴展面板 - 移除面板間距

彈出面板

在 <div class="mdui-panel"></div> 元素上添加類 .mdui-panel-popout 即可使打開的面板有彈出效果。

www.mdui.org - 可擴展面板 - 彈出面板

面板嵌套

可擴展面板可以互相嵌套。

www.mdui.org - 可擴展面板 - 面板嵌套

調(diào)用方式

通過自定義屬性調(diào)用

使用該方式無需編寫 JavaScript 代碼。只需在 <div class="mdui-panel"></div> 元素上添加 mdui-panel="options" 屬性即可激活該插件。

通過 JavaScript 調(diào)用

實例化組件：

// selector 為 .mdui-panel 元素的 CSS 選擇器或 DOM 元素
// options 為插件的參數(shù)，見下面的參數(shù)列表
var inst = new mdui.Panel(selector, options);

參數(shù)

參數(shù)名	類型	默認值	描述
accordion	boolean	false	是否啟用手風琴效果。為 true 時，最多只能有一個面板項處于打開狀態(tài)，打開一個面板項時會關(guān)閉其他面板項。為 false 時，可同時打開多個面板項。

方法

方法名	描述
open(item)	打開面板項。 item：面板項的索引號、或者 DOM 元素、或者 CSS 選擇器。
close(item)	關(guān)閉面板項。 item：面板項的索引號、或者 DOM 元素、或者 CSS 選擇器。
toggle(item)	切換面板項狀態(tài)。 item：面板項的索引號、或者 DOM 元素、或者 CSS 選擇器。
openAll()	打開所有面板項。該方法僅在 accordion 為 false 時有效。
closeAll()	關(guān)閉所有面板項。

事件

事件	描述	目標	參數(shù)
open.mdui.panel	面板項開始打開動畫時，事件將被觸發(fā)。	<div class="mdui-panel-item"></div>	event.detail.inst：實例
opened.mdui.panel	面板項結(jié)束打開動畫時，事件將被觸發(fā)。	<div class="mdui-panel-item"></div>	event.detail.inst：實例
close.mdui.panel	面板項開始關(guān)閉動畫時，事件將被觸發(fā)。	<div class="mdui-panel-item"></div>	event.detail.inst：實例
closed.mdui.panel	面板項結(jié)束關(guān)閉動畫時，事件將被觸發(fā)。	<div class="mdui-panel-item"></div>	event.detail.inst：實例

CSS 類名列表

類名	效果
.mdui-panel	定義一個可擴展面板。
.mdui-panel-gapless	移除打開的面板和其他面板之間的間距。
.mdui-panel-popout	使打開的面板具有彈出效果。
.mdui-panel-item	定義一個可擴展面板的面板項。
.mdui-panel-item-open	使面板項默認打開。
.mdui-panel-item-header	定義一個面板項的頭部。
.mdui-panel-item-title	定義面板項頭部的標題。
.mdui-panel-item-summary	定義面板項頭部的概要。
.mdui-panel-item-arrow	定義面板項的展開收起圖標。
.mdui-panel-item-body	定義面板項內(nèi)容。
.mdui-panel-item-actions	定義面板項的操作欄。

以上內(nèi)容是否對您有幫助：

寫筆記

我要補充