menu MDUI 文档
color_lens
view_carousel
JavaScript 插件
keyboard_arrow_down
local_mall
资源
keyboard_arrow_down

可扩展面板

调用方式

  1. 通过自定义属性调用(若组件是动态生成的,则需要调用 mdui.mutation() 进行初始化)
  2. 通过 JavaScript 调用

样式

完整 HTML 结构

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

Example
Trip name
Carribean cruise
keyboard_arrow_down

First content

First content

First content

First content

First content

First content

Location
keyboard_arrow_down

Second content

Second content

Second content

Second content

Second content

Second content

Start and end dates
Start date: Feb 29, 2016
End date: Not set
keyboard_arrow_down

Third content

Third content

Third content

Third content

Third content

Third content

<div class="mdui-panel" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">
      <div class="mdui-panel-item-title">Trip name</div>
      <div class="mdui-panel-item-summary">Carribean cruise</div>
      <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <div class="mdui-panel-item-actions">
        <button class="mdui-btn mdui-ripple" mdui-panel-item-close>cancel</button>
        <button class="mdui-btn mdui-ripple">save</button>
      </div>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">
      <div class="mdui-panel-item-title">Location</div>
      <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <div class="mdui-panel-item-actions">
        <button class="mdui-btn mdui-ripple" mdui-panel-item-close>cancel</button>
        <button class="mdui-btn mdui-ripple">save</button>
      </div>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">
      <div class="mdui-panel-item-title">Start and end dates</div>
      <div class="mdui-panel-item-summary">Start date: Feb 29, 2016</div>
      <div class="mdui-panel-item-summary">End date: Not set</div>
      <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <div class="mdui-panel-item-actions">
        <button class="mdui-btn mdui-ripple" mdui-panel-item-close>cancel</button>
        <button class="mdui-btn mdui-ripple">save</button>
      </div>
    </div>
  </div>

</div>

最简 HTML 结构

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

Example
First

First content

First content

First content

First content

First content

First content

Second

Second content

Second content

Second content

Second content

Second content

Second content

Third

Third content

Third content

Third content

Third content

Third content

Third content

<div class="mdui-panel" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

默认打开的面板项

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

Example
First

First content

First content

First content

First content

First content

First content

Second

Second content

Second content

Second content

Second content

Second content

Second content

Third

Third content

Third content

Third content

Third content

Third content

Third content

<div class="mdui-panel" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item mdui-panel-item-open">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

移除面板间距

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

Example
First

First content

First content

First content

First content

First content

First content

Second

Second content

Second content

Second content

Second content

Second content

Second content

Third

Third content

Third content

Third content

Third content

Third content

Third content

<div class="mdui-panel mdui-panel-gapless" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

弹出面板

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

Example
First

First content

First content

First content

First content

First content

First content

Second

Second content

Second content

Second content

Second content

Second content

Second content

Third

Third content

Third content

Third content

Third content

Third content

Third content

<div class="mdui-panel mdui-panel-popout" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

面板嵌套

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

Example
First

First content

First content

First content

First

First content

First content

First content

First

First content

First content

First content

Second

Second content

Second content

Second content

Second

Second content

Second content

Second content

Second

Second content

Second content

Second content

Third

Third content

Third content

Third content

<div class="mdui-panel" mdui-panel>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>

      <!-- 第一个嵌套的可扩展列表 -->
      <div class="mdui-panel" mdui-panel>
        <div class="mdui-panel-item">
          <div class="mdui-panel-item-header">First</div>
          <div class="mdui-panel-item-body">
            <p>First content</p>
            <p>First content</p>
            <p>First content</p>

            <!-- 第二个嵌套的可扩展列表 -->
            <div class="mdui-panel" mdui-panel>
              <div class="mdui-panel-item">
                <div class="mdui-panel-item-header">First</div>
                <div class="mdui-panel-item-body">
                  <p>First content</p>
                  <p>First content</p>
                  <p>First content</p>
                </div>
              </div>
              <div class="mdui-panel-item">
                <div class="mdui-panel-item-header">Second</div>
                <div class="mdui-panel-item-body">
                  <p>Second content</p>
                  <p>Second content</p>
                  <p>Second content</p>
                </div>
              </div>
            </div>

          </div>
        </div>
        <div class="mdui-panel-item">
          <div class="mdui-panel-item-header">Second</div>
          <div class="mdui-panel-item-body">
            <p>Second content</p>
            <p>Second content</p>
            <p>Second content</p>
          </div>
        </div>
      </div>

    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>
</div>

调用方式

通过自定义属性调用

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

若组件是动态生成的,则需要调用 mdui.mutation() 进行初始化。

Example
First

First content

First content

First content

First content

First content

First content

Second

Second content

Second content

Second content

Second content

Second content

Second content

Third

Third content

Third content

Third content

Third content

Third content

Third content

<div class="mdui-panel" mdui-panel="{accordion: true}">
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>
</div>

在可扩展面板内的元素上可以添加一些属性来绑定事件,这些属性在使用 JavaScript 调用方式时也可以使用。

属性 说明
mdui-panel-item-close 点击该元素会触发 close.mdui.panel 事件,并关闭该元素所处的面板。

通过 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() 打开所有面板项。该方法仅在 accordionfalse 时有效。
closeAll() 关闭所有面板项。

事件

事件 描述 目标 参数
open.mdui.panel 面板项开始打开动画时,事件将被触发。 <div class="mdui-panel-item"></div> event._detail.inst:实例
opened.mdui.panel 面板项结束打开动画时,事件将被触发。
close.mdui.panel 面板项开始关闭动画时,事件将被触发。
closed.mdui.panel 面板项结束关闭动画时,事件将被触发。

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 定义面板项的操作栏。
设置文档主题

主题色

主色

强调色