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

折りたたみ

折りたたみコンポーネントは、折りたたみ項目を展開・折りたたみするために使用されます。

このコンポーネント自体にはスタイルが含まれていません。自身でスタイルを作成するか、他のコンポーネントと組み合わせて使用する必要があります。

使用方法

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

HTML 構造

これは最も基本的な HTML 構造です：

<div class="mdui-collapse">
  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header"></div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

クラス .mdui-collapse-item-open を追加すると、折りたたみ項目を既定で展開状態にできます：

<div class="mdui-collapse">
  <div class="mdui-collapse-item mdui-collapse-item-open">
    <div class="mdui-collapse-item-header"></div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

クラス .mdui-collapse-item-arrow を含む要素は、折りたたみ項目が展開されたときに 180 度回転します：

<div class="mdui-collapse">
  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <div class="mdui-collapse-item-arrow"></div>
    </div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

使用方法

カスタム属性での呼び出し

この方法を使用すると、JavaScript コードを記述する必要がありません。<div class="mdui-collapse"></div> 要素に mdui-collapse="options" 属性を追加するだけで、プラグインが有効になります。

コンポーネントが動的に生成される場合は、初期化のために mdui.mutation() を呼び出す必要があります。

codeplay_arrow
例
<div class="mdui-collapse" mdui-collapse>

  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <p><a href="javascript:;">item1</a></p>
    </div>
    <div class="mdui-collapse-item-body">
      <p>item1 content</p>
      <p>item1 content</p>
      <p>item1 content</p>

      <!-- 入れ子になった要素 -->
      <div class="mdui-collapse" mdui-collapse>
        <div class="mdui-collapse-item">
          <div class="mdui-collapse-item-header">
            <p><a href="javascript:;">subitem1</a></p>
          </div>
          <div class="mdui-collapse-item-body">
            <p>subitem1 content</p>
            <p>subitem1 content</p>
            <p>subitem1 content</p>
          </div>
        </div>
      </div>

    </div>
  </div>

  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <p><a href="javascript:;">item2</a></p>
    </div>
    <div class="mdui-collapse-item-body">
      <p>item2 content</p>
      <p>item2 content</p>
      <p>item2 content</p>
    </div>
  </div>

  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <p><a href="javascript:;">item3</a></p>
    </div>
    <div class="mdui-collapse-item-body">
      <p>item3 content</p>
      <p>item3 content</p>
      <p>item3 content</p>
    </div>
  </div>

</div>

折りたたみ内の要素には、イベントをバインドするためにいくつかの属性を追加できます。これらの属性は JavaScript で呼び出す際にも使用できます。

属性説明
mdui-collapse-item-closeこの要素をクリックすると close.mdui.collapse イベントが発生し、その要素が属するパネルが閉じられます。

JavaScript での呼び出し

プラグインのインスタンス化：

// selector は要素の CSS セレクターまたは DOM 要素です
// options はプラグインのパラメーターです。以下のパラメーターリストを参照してください
var inst = new mdui.Collapse(selector, options);
demo

パラメータ

パラメータ名タイプデフォルト値説明
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.collapse折りたたみ項目が展開するアニメーションを開始したときにイベントが発生します。<div class="mdui-collapse-item"></div>event._detail.inst：インスタンス
opened.mdui.collapse折りたたみ項目が展開するアニメーションを終了したときにイベントが発生します。
close.mdui.collapse折りたたみ項目が折りたたむアニメーションを開始したときにイベントが発生します。
closed.mdui.collapse折りたたみ項目が折りたたむアニメーションを終了したときにイベントが発生します。

その他の例

サブリスト

code
例
<ul class="mdui-list" mdui-collapse="{accordion: true}">

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">home</i>
    <div class="mdui-list-item-content">Home</div>
  </li>

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">dashboard</i>
    <div class="mdui-list-item-content">Dashboard</div>
  </li>

  <li class="mdui-collapse-item mdui-collapse-item-open">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">people</i>
      <div class="mdui-list-item-content">Audience</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">Language</li>
      <li class="mdui-list-item mdui-ripple">Location</li>
      <li class="mdui-list-item mdui-ripple">New vs Returning</li>
    </ul>
  </li>

  <li class="mdui-collapse-item">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">device_hub</i>
      <div class="mdui-list-item-content">Acquisition</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">All Traffic</li>
      <li class="mdui-list-item mdui-ripple">Direct Traffic</li>
      <li class="mdui-list-item mdui-ripple">Search Overview</li>
    </ul>
  </li>

  <li class="mdui-collapse-item">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">touch_app</i>
      <div class="mdui-list-item-content">Behavior</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">All Pages</li>
      <li class="mdui-list-item mdui-ripple">Landing Pages</li>
      <li class="mdui-list-item mdui-ripple">Exit Pages</li>
    </ul>
  </li>

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">shopping_cart</i>
    <div class="mdui-list-item-content">Ecommerce</div>
  </li>

</ul>
arrow_backPrevious
プログレス
arrow_forwardNext
Headroom