可扩展面板

样式

完整 HTML 结构

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

Example

Trip name

Carribean cruise

First content

Location

Second content

Start and end dates

Start date: Feb 29, 2016

End date: Not set

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">&#xe313;</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">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">&#xe313;</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">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">&#xe313;</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">cancel</button>
        <button class="mdui-btn mdui-ripple">save</button>
      </div>
    </div>
  </div>
  
</div>

最简 HTML 结构

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

Example

First

First content

Second

Second content

Third

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

Second

Second content

Third

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

Second

Second content

Third

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

Second

Second content

Third

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

First content

First

First content

Second

Second content

Second

Second content

Second

Second content

Third

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" 属性即可激活该插件。

Example

First

First content

Second

Second content

Third

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 调用

实例化组件：

// 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`	面板项结束打开动画时，事件将被触发。
`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`	定义面板项的操作栏。

调用方式

相关阅读

样式

完整 HTML 结构

最简 HTML 结构

默认打开的面板项

移除面板间距

弹出面板

面板嵌套

调用方式

通过自定义属性调用

通过 JavaScript 调用

参数

方法

事件

CSS 类名列表