Collapse折りたたみ

折りたたみコンポーネントは、複雑なコンテンツ領域をグループ化して非表示にし、ページを整理するために使用します。

この折りたたみコンポーネント自体にはスタイルが含まれていないことに注意してください。スタイルは自分で追加するか、他のコンポーネントと組み合わせて使用する必要があります。

使用方法

コンポーネントを必要に応じてインポートします：

import 'mdui/components/collapse.js';
import 'mdui/components/collapse-item.js';

コンポーネントの TypeScript 型を必要に応じてインポートします：

import type { Collapse } from 'mdui/components/collapse.js';
import type { CollapseItem } from 'mdui/components/collapse-item.js';

使用例：

first content

second content

<mdui-collapse>
  <mdui-collapse-item header="first header">first content</mdui-collapse-item>
  <mdui-collapse-item header="second header">second content</mdui-collapse-item>
</mdui-collapse>

例

パネルのタイトルとコンテンツ

<mdui-collapse-item> コンポーネントの header 属性を使用してパネルヘッダーのテキストを設定できます。また、header スロットを使用してパネルヘッダー要素を指定することもできます。コンポーネントのデフォルトスロットはパネルコンテンツ用です。

Item 1

Item 1 - subitem

Item 2

Item 2 - subitem

<mdui-list>
  <mdui-collapse>
    <mdui-collapse-item>
      <mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
      <div style="margin-left: 2.5rem">
        <mdui-list-item>Item 1 - subitem</mdui-list-item>
      </div>
    </mdui-collapse-item>
    <mdui-collapse-item>
      <mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
      <div style="margin-left: 2.5rem">
        <mdui-list-item>Item 2 - subitem</mdui-list-item>
      </div>
    </mdui-collapse-item>
  </mdui-collapse>
</mdui-list>

ソース

アコーディオンモード

<mdui-collapse> コンポーネントに accordion 属性を追加すると、アコーディオンモードを有効にできます。これにより、一度に1つのパネルのみが開いた状態になります。

Item 1

Item 1 - subitem

Item 2

Item 2 - subitem

<mdui-list>
  <mdui-collapse accordion>
    <mdui-collapse-item>
      <mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
      <div style="margin-left: 2.5rem">
        <mdui-list-item>Item 1 - subitem</mdui-list-item>
      </div>
    </mdui-collapse-item>
    <mdui-collapse-item>
      <mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
      <div style="margin-left: 2.5rem">
        <mdui-list-item>Item 2 - subitem</mdui-list-item>
      </div>
    </mdui-collapse-item>
  </mdui-collapse>
</mdui-list>

ソース

アクティブなパネルを設定

<mdui-collapse> コンポーネントの value 属性を使用して、現在開いているパネルを取得したり、開くパネルを設定したりできます。

アコーディオンモードでは、value 属性の値は文字列です。HTML 属性または JavaScript プロパティを使用してこの属性を操作できます。非アコーディオンモードでは、value 属性の値は配列で、JavaScript プロパティを通じてのみ操作できます。

アコーディオンモード

Item 1

Item 1 - subitem

Item 2

Item 2 - subitem

非アコーディオンモード

Item 1

Item 1 - subitem

Item 2

Item 2 - subitem

<mdui-list>
  <mdui-list-subheader>アコーディオンモード</mdui-list-subheader>
  <mdui-collapse accordion value="item-1">
    <mdui-collapse-item value="item-1">
      <mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
      <div style="margin-left: 2.5rem">
        <mdui-list-item>Item 1 - subitem</mdui-list-item>
      </div>
    </mdui-collapse-item>
    <mdui-collapse-item value="item-2">
      <mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
      <div style="margin-left: 2.5rem">
        <mdui-list-item>Item 2 - subitem</mdui-list-item>
      </div>
    </mdui-collapse-item>
  </mdui-collapse>

  <mdui-list-subheader>非アコーディオンモード</mdui-list-subheader>
  <mdui-collapse class="example-value">
    <mdui-collapse-item value="item-1">
      <mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
      <div style="margin-left: 2.5rem">
        <mdui-list-item>Item 1 - subitem</mdui-list-item>
      </div>
    </mdui-collapse-item>
    <mdui-collapse-item value="item-2">
      <mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
      <div style="margin-left: 2.5rem">
        <mdui-list-item>Item 2 - subitem</mdui-list-item>
      </div>
    </mdui-collapse-item>
  </mdui-collapse>
</mdui-list>

<script>
  const collapse = document.querySelector(".example-value");
  collapse.value = ["item-1", "item-2"];
</script>

ソース

無効状態

<mdui-collapse> コンポーネントに disabled 属性を追加すると、折りたたみコンポーネントグループ全体を無効にできます。同様に、<mdui-collapse-item> コンポーネントに disabled 属性を追加すると、特定の折りたたみパネルを無効にできます。

すべて無効

Item 1

Item 1 - subitem

Item 2

Item 2 - subitem

最初のパネルを無効化

Item 1

Item 1 - subitem

Item 2

Item 2 - subitem

<mdui-list>
  <mdui-list-subheader>すべて無効</mdui-list-subheader>
  <mdui-collapse disabled>
    <mdui-collapse-item>
      <mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
      <div style="margin-left: 2.5rem">
        <mdui-list-item>Item 1 - subitem</mdui-list-item>
      </div>
    </mdui-collapse-item>
    <mdui-collapse-item>
      <mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
      <div style="margin-left: 2.5rem">
        <mdui-list-item>Item 2 - subitem</mdui-list-item>
      </div>
    </mdui-collapse-item>
  </mdui-collapse>

  <mdui-list-subheader>最初のパネルを無効化</mdui-list-subheader>
  <mdui-collapse>
    <mdui-collapse-item disabled>
      <mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
      <div style="margin-left: 2.5rem">
        <mdui-list-item>Item 1 - subitem</mdui-list-item>
      </div>
    </mdui-collapse-item>
    <mdui-collapse-item>
      <mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
      <div style="margin-left: 2.5rem">
        <mdui-list-item>Item 2 - subitem</mdui-list-item>
      </div>
    </mdui-collapse-item>
  </mdui-collapse>
</mdui-list>

ソース

折りたたみを切り替える要素

デフォルトでは、パネルヘッダー領域全体をクリックすると折りたたみの開閉が切り替わります。<mdui-collapse-item> コンポーネントの trigger 属性を設定することで、折りたたみをトリガーする要素を指定できます。trigger 属性は CSS セレクタまたは DOM 要素です。

Item 1

Item 1 - subitem

<mdui-list>
  <mdui-collapse>
    <mdui-collapse-item trigger=".example-trigger">
      <mdui-list-item slot="header" icon="near_me">
        Item 1
        <mdui-icon slot="end-icon" class="example-trigger" name="keyboard_arrow_down"></mdui-icon>
      </mdui-list-item>
      <div style="margin-left: 2.5rem">
        <mdui-list-item>Item 1 - subitem</mdui-list-item>
      </div>
    </mdui-collapse-item>
  </mdui-collapse>
</mdui-list>

ソース

`mdui-collapse-item` API

プロパティ

HTML 属性	JavaScript プロパティ	型	デフォルト値
`value`	`value`	`string`	-
この折りたたみパネルアイテムの値です。
`header`	`header`	`string`	-
この折りたたみパネルアイテムのヘッダーテキストです。
`disabled`	`disabled`	`boolean`	`false`
この折りたたみパネルアイテムを無効にするかどうかを指定します。
`trigger`	`trigger`	`string \| HTMLElement \| JQ<HTMLElement>`	-
この要素をクリックすると折りたたみがトリガーされます。値にはCSSセレクター、DOM要素、またはJQオブジェクトを指定できます。デフォルトでは、ヘッダー領域全体をクリックするとトリガーされます。

イベント

名前
`open`
開き始めたときに発生するイベントです。
`opened`
開くアニメーションが完了したときに発生するイベントです。
`close`
閉じ始めたときに発生するイベントです。
`closed`
閉じるアニメーションが完了したときに発生するイベントです。

Slots

名前
デフォルト
折りたたみパネルアイテムの本文コンテンツ
`header`
折りたたみパネルアイテムのヘッダーコンテンツ

CSS Parts

名前
`header`
折りたたみパネルのヘッダーコンテンツ
`body`
折りたたみパネルの本文コンテンツ

`mdui-collapse` API

プロパティ

HTML 属性	JavaScript プロパティ	型	デフォルト値
`accordion`	`accordion`	`boolean`	`false`
アコーディオンモードを有効にするかどうかを指定します。
`value`	`value`	`string \| string[]`	-
現在展開されている `<mdui-collapse-item>` の値です。注：この属性のHTML属性値は常に文字列として扱われ、`accordion` が `true` の場合にのみ初期値を設定できます。この属性のJavaScriptプロパティ値は、`accordion` が `true` の場合は文字列、`accordion` が `false` の場合は文字列の配列になります。したがって、`accordion` が `false` の場合、この値を変更するにはJavaScriptプロパティ値を変更する必要があります。
`disabled`	`disabled`	`boolean`	`false`
この折りたたみパネルを無効にするかどうかを指定します。

イベント

名前
`change`
現在展開されている折りたたみパネルアイテムが変更されたときに発生します。

Slots

名前
デフォルト
`<mdui-collapse-item>` コンポーネント

前の章

CircularProgress 円形プログレス

次の章

Dialog ダイアログ