Menu
主要な操作は画面に出す。Menu に隠すのは頻度の低い操作だけにする。
デモ
import { Button, Menu, MenuItem, MenuSeparator } from '@novi-ui/raster'
<Menu>
<Button variant="outline">操作</Button>
<MenuItem id="rename" shortcut="⌘R">名前を変更</MenuItem>
<MenuSeparator />
<MenuItem id="delete">削除</MenuItem>
</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 で決定、Escape で閉じる。開いている間はメニュー外を読み上げ対象から外す。 IME 変換中の Enter は抑制される
- キーボードだけで操作できます。フォーカスリングはコントラスト比 3:1 以上です。
- 本文のコントラスト比は light / dark とも 4.5:1 以上を検査で保証しています。
prefers-reduced-motionが有効なときはアニメーションを行いません。