ui:collapse
汎用的なCollapseコンポーネントです。
- WAI-ARIA Authoring Practices の Disclosure (Show/Hide) Pattern に準拠しています。
Examples
Section titled “Examples”Default
Section titled “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>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
Section titled “Variants”| 属性 | 要素 | 値 | 効果 |
|---|---|---|---|
name | root | (name identifer) | グループ指定 |
open | root | - | 開閉状態の初期値指定 |
data-size | root | small | サイズ指定 |
Keyboard Controll
Section titled “Keyboard Controll”| キー | 動作 |
|---|---|
| 開閉状態を操作 |