コンポーネント一覧
Menu
主要な操作は画面に出す。Menu に隠すのは頻度の低い操作だけにする。
デモ
使い分け
こうする
- 3 つ以上の関連する操作をまとめるときに使う
- 危険な操作は末尾に置き、区切り線で離す
こうしない
- 1 つしか項目が無いメニューを作らない。ボタンにする
- ナビゲーション（ページ移動）を Menu にしない。リンクの一覧にする
Props
| 名前 | 型 | 説明 |
|---|---|---|
| placement | NoviPlacement | |
| offset | number | |
| isOpen | boolean | |
| defaultOpen | boolean | |
| onOpenChange | (isOpen: boolean) => void | |
| onAction | (key: string) => void | 項目が選ばれたとき。id が渡る |
| isDisabled | boolean | |
| disabledKeys | string[] | 選択不可にする項目の id |
| children | ReactNode | |
| classNames | ClassNames<typeof menuSlots> |
Slot
構成部位に data-slot が出力されます。 CSS の上書きやテストはこれを狙ってください。
- trigger必須
- popover必須
- list必須
- item必須
- itemLabel
- itemDescription
- itemShortcut
- separator
- section
- sectionLabel
アクセシビリティ
| キー | 動作 |
|---|---|
| Enter / Space / ↓（トリガー） | 開く |
| ↑ ↓ | 項目を移動 |
| Enter | 決定 |
| Escape | 閉じる |
- 矢印キーで移動、Enter で決定、Escape で閉じる。開いている間はメニュー外を読み上げ対象から外す。 IME 変換中の Enter は抑制される
- キーボードだけで操作できます。フォーカスリングはコントラスト比 3:1 以上です。
- 本文のコントラスト比は light / dark とも 4.5:1 以上を検査で保証しています。
prefers-reduced-motionが有効なときはアニメーションを行いません。