menuMDUIDocs
color_lens
Material Design 3 と Web Components をベースにした新しい mdui 2 がリリースされました。mdui 2 ドキュメントはこちら。

折りたたみパネル

使用方法

  1. カスタム属性による呼び出し（コンポーネントが動的に生成される場合は、初期化のために mdui.mutation() を呼び出す必要があります）
  2. JavaScript での呼び出し

関連情報

Material Design デザインガイドライン：コンポーネント - 折りたたみパネル

スタイル

完全な HTML 構造

この例には、含めることができるすべての HTML 要素が含まれています。

codeplay_arrow
例
<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 要素のみが含まれています。

codeplay_arrow
例
<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 を追加すると、そのパネル項目がデフォルトで開いた状態になります。

codeplay_arrow
例
<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 を追加すると、開いたパネルと他のパネルの間の間隔を削除できます。

codeplay_arrow
例
<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 を追加すると、開いたパネルにポップアウト効果を与えることができます。

codeplay_arrow
例
<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>

パネルのネスト

折りたたみパネルは相互にネストできます。

codeplay_arrow
例
<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>

      <!-- 1 番目のネストされた折りたたみパネル -->
      <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>

            <!-- 2 番目のネストされた折りたたみパネル -->
            <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() を呼び出す必要があります。

codeplay_arrow
例
<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);
実行

パラメータ

パラメータ名タイプデフォルト値説明
accordionbooleanfalseアコーディオン効果を有効にするかどうか。
  • true の場合、最大 1 つのパネル項目のみが開いた状態になり、1 つのパネル項目を開くと他のパネル項目が閉じます。
  • 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パネル項目のアクションバーを定義します。
arrow_backPrevious
区切り線
arrow_forwardNext
テキストフィールド