可扩展面板

2018-05-25 00:45 更新

toggle(item)调用方式

  • 通过自定义属性调用
  • 通过 JavaScript 调用


相关阅读

Material Design 可扩展面板设计规范


样式

完整 HTML 结构

这个示例包含了所有可以包含的 HTML 元素。

www.mdui.org - 可扩展面板 - 完整 HTML 结构

在线运行


最简 HTML 结构

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

www.mdui.org - 可扩展面板 - 最简 HTML 结构

在线运行


默认打开的面板项

在 <div class="mdui-panel-item"></div> 元素上添加类 .mdui-panel-item-open 即可使该面板项处于默认打开状态。

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 - 可扩展面板 - 面板嵌套

在线运行


调用方式

通过自定义属性调用

使用该方式无需编写 JavaScript 代码。只需在 <div class="mdui-panel"></div> 元素上添加 mdui-panel="options" 属性即可激活该插件。

在线运行


通过 JavaScript 调用

实例化组件:

// selector 为 .mdui-panel 元素的 CSS 选择器或 DOM 元素
// options 为插件的参数,见下面的参数列表
var inst = new mdui.Panel(selector, options);

在线运行


参数

 参数名 类型 默认值 描述
 accordion boolean false 是否启用手风琴效果。
  • 为 true 时,最多只能有一个面板项处于打开状态,打开一个面板项时会关闭其他面板项。
  • 为 false 时,可同时打开多个面板项。


方法

 方法名 描述
 open(item) 打开面板项。
  • item:面板项的索引号、或者 DOM 元素、或者 CSS 选择器。
 close(item) 关闭面板项。
  • item:面板项的索引号、或者 DOM 元素、或者 CSS 选择器。
 toggle(item) 切换面板项状态。
  • item:面板项的索引号、或者 DOM 元素、或者 CSS 选择器。
 openAll() 打开所有面板项。该方法仅在 accordion 为 false 时有效。
 closeAll() 关闭所有面板项。


事件

 事件 描述 目标 参数
 open.mdui.panel 面板项开始打开动画时,事件将被触发。 <div class="mdui-panel-item"></div> event.detail.inst:实例
 opened.mdui.panel 面板项结束打开动画时,事件将被触发。 <div class="mdui-panel-item"></div> event.detail.inst:实例
 close.mdui.panel 面板项开始关闭动画时,事件将被触发。 <div class="mdui-panel-item"></div> event.detail.inst:实例
 closed.mdui.panel 面板项结束关闭动画时,事件将被触发。 <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 定义面板项内容。
 .mdui-panel-item-actions 定义面板项的操作栏。


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号