Accordion
fandhe-frontend-wireframe-ui のアコーディオンのプレースホルダーです。見出し + 開閉キャレット + 本文からなる項目を縦に並べます。API は accordion(items, size) の 2 引数で、items は「見出しテキスト・本文スロット・展開済みか」の組の列(Vec<(&str, Node, bool)>)です(詳細は下の引数表を参照)。
accordion は blocks.pm カタログに対応部品を持たない wireframe-ui 独自追加部品です(詳細は docs/design/wireframe-ui-architecture.md §7)。
本部品は表示専用のため、実際に開閉するアコーディオンとしては出力しません。実際に操作できるアコーディオンが必要な場合は Accordion(Themes)・Accordion(Primitives) を検討してください。
Demo
既定(展開 1・折りたたみ 2 の混在)
配送について
ご注文から 3〜5 営業日以内に発送します。
返品について
お支払い方法
すべて展開
項目A
項目Aの本文です。
項目B
項目Bの本文です。
すべて折りたたみ
項目A
項目B
Sm
見出し
本文プレースホルダーです。
Lg
見出し
本文プレースホルダーです。
引数表
| 引数 | 型 | 既定値 | 説明 |
|---|---|---|---|
| items | Vec<(&str, Node, bool)> | - | 「見出し・本文スロット・展開済みか」の組の列。所有で受ける。 |
| size | Size | Size::Md | サイズ段階(xs〜xl)。 |
原案差分メモ
- 独自追加部品: blocks.pm カタログに対応部品を持たないため、外観・プロパティ構成は
docs/design/wireframe-ui-architecture.md§6 の汎用変換規約から独立に設計しました。 - 項目は
Vecの所有で受ける: 借用スライス(&[(&str, Node, bool)])ではなくVec<(&str, Node, bool)>の所有で受けます。Nodeを子として所有で受ける既存部品(stack/grid/frame/question)の先例に揃えた設計で、借用スライスだと項目ごとにNode::clone()が必要になりcoding-rust.md「不要なclone()を避ける」に反するためです。 - 展開状態は
props::Activeを再利用: 新しい専用型(Expanded等)は追加せず、既存のprops::Activeを項目単位で再利用しdata-activeを付与します(switch/radio/tabs の先例と同じ判断)。aria-expandedは非対話制約(§7)により出力しません。 - 折りたたみ項目の本文は出力しない:
expanded == falseの項目は渡された本文Nodeを出力せず捨てます。hidden属性や CSS で隠す方式は使わず、静的 SSR プレースホルダーとして隠しコンテンツを持たない決定的な出力にしています。 <details>/<summary>は使わない: ブラウザ標準で開閉できる対話要素のため、ルート・項目・見出し行はすべてdivで組みます(§7 の非対話制約)。<button>/<a>/<input>/role/aria-*(アイコン基盤の装飾用aria-hiddenを除く)/tabindex/style/on*も一切出力しません。- キャレットの向き: 見出し行の末尾に固定パートとしてキャレットを置き、展開時は
icon::caret_up、折りたたみ時はicon::caret_downを使います(select の末尾ドロップダウン指示子と同じ扱い)。 - 責務外の軸:
Bold/Primary/Disabled/Orientation・先頭アイコンスロットは持ちません。