Menu
fandhe-frontend-wireframe-ui のドロップダウン風メニューのプレースホルダーです。検索欄(任意)と、有効・無効が混在する項目リストからなるパネルの配置イメージを示します。API は menu(items, active, search, size) の 4 引数(詳細は下の引数表を参照)で、項目は MenuItem::new/MenuItem::disabled で構築します。
視覚的な参照元は blocks.pm の Menu 部品ですが、ライセンス上の理由によりスクリーンショットは掲載していません(詳細は docs/design/wireframe-ui-architecture.md §2)。参照したい場合は外部リンク先を直接確認してください。
本部品は表示専用のため、role="menu"/menuitem・開閉・キーボードナビゲーションは実装しません。実際に操作できるメニューが必要な場合は Menu(Themes)・Menu(Primitives) を検討してください。
Demo
検索あり + 先頭項目を強調
検索なし
強調なし
無効項目を指す active(強調は付与されない)
Sm
Lg
引数表
| 引数 | 型 | 既定値 | 説明 |
|---|---|---|---|
| items | &[MenuItem<'_>] | - | メニュー項目のスライス。MenuItem::new/MenuItem::disabled で構築する。 |
| active | Option<usize> | None | 強調(選択中)項目の添字。範囲外・無効項目を指す値は付与しない。 |
| search | Option<&str> | None | 省略可能な検索欄プレースホルダー文言。Some のときのみ検索行を出力する。 |
| size | Size | Size::Md | サイズ段階(xs〜xl)。 |
原案差分メモ
- API は独自設計:
docs/design/wireframe-ui-architecture.md§6 と既存部品(tabsのactive: Option<usize>、nav_itemのOption<&str>内部パート、selectの固定パートによる指示子)から独立設計しました。同文書 §2 の保留(イシュー #2602)に従い、blocks.pm のOption1〜Option5個別 bool+text スロット構成は参照・書き写していません。 - 項目はスライスへ畳む: 固定 5 スロットの bool+text ではなく、公開の
MenuItem構造体(ラベル + 無効状態)のスライスitems: &[MenuItem]で受けています。項目数に上限は設けていません。 - 強調状態は
Option<usize>、無効項目を優先:tabsと同じく「強調中は高々 1 件」を型で保証します。activeが無効項目を指している場合は強調を付与しません(決定的で見た目の矛盾を避けるため)。範囲外の添字・Noneも同様に安全側へ倒します。 - 検索欄は
Option<&str>+ 固定アイコン: bool ではなく検索行のプレースホルダー文言を持つ内部パートとしました。先頭には常に固定パートのicon::searchを出力し、アイコンスロットにはしていません(selectのドロップダウン指示子と同じ判断: 利用者が省略・差し替えできない部品の同一性を担う要素のため)。<input>は出力しません。 - アイコンスロットは非採用:
docs/design/wireframe-ui-architecture.md§11.4 は Menu をこの規約の適用先の例に挙げていますが、本イシューでは項目ごとのアイコン差し替えを対応範囲外としました。将来必要になった場合は別イシューで検討します。 Orientation/Bold/Primary/全体のDisabledは持たない: イシューの要求範囲外です。- スクリーンショット非掲載:
docs/design/reference-screenshots/への blocks.pm 画像取り込みは #2602 で fail-closed に非掲載と確定しています。本ページも画像は置かず、上記の外部リンクのみで代替します。 - 非インタラクティブ:
role="menu"/aria-expanded/aria-haspopup・tabindex・実際の開閉は一切出力しません(同文書 §7 の非対話制約)。