ui:collapse

汎用的なCollapseコンポーネントです。

• WAI-ARIA Authoring Practices の Disclosure (Show/Hide) Pattern に準拠しています。

Examples

Default

Source Code

<details class="ui:collapse" name="group">
  <summary class="ui:collapse__heading">見出しテキスト</summary>
  <div class="ui:collapse__content">
    <div class="ui:collapse__body">
      <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
    </div>
  </div>
</details>
<details class="ui:collapse" name="group" open>
  <summary class="ui:collapse__heading">見出しテキスト</summary>
  <div class="ui:collapse__content">
    <div class="ui:collapse__body">
      <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
    </div>
  </div>
</details>
<details class="ui:collapse" name="group">
  <summary class="ui:collapse__heading">見出しテキスト</summary>
  <div class="ui:collapse__content">
    <div class="ui:collapse__body">
      <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
    </div>
  </div>
</details>

Sizes

Source Code

<details class="ui:collapse" data-size="small">
  <summary class="ui:collapse__heading">Small Size</summary>
  <div class="ui:collapse__content">
    <div class="ui:collapse__body">
      <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
    </div>
  </div>
</details>

Variants

属性	要素	値	効果
name	root	(name identifer)	グループ指定
open	root	-	開閉状態の初期値指定
data-size	root	small	サイズ指定

Keyboard Controll

キー	動作
Enter Enter Enter Enter / Space Space Space Space	開閉状態を操作