コンポーネント
Command
キーボード中心で操作できる、検索付きコマンドメニューです。
Open settings ⌘,
New window ⌘N
使い方
import {
Command, CommandEmpty, CommandGroup, CommandInput,
CommandItem, CommandList, CommandShortcut,
} from '@murasakijs/ui'
<Command className="rounded-lg border">
<CommandInput placeholder="コマンドを検索…" />
<CommandList>
<CommandEmpty>見つかりませんでした。</CommandEmpty>
<CommandGroup heading="移動">
<CommandItem>設定を開く <CommandShortcut>⌘,</CommandShortcut></CommandItem>
</CommandGroup>
</CommandList>
</Command>モーダルのコマンドパレットには CommandDialog を使い、Dialog の props で開閉状態を管理します。表示したショートカットは説明にすぎないため、キー処理は別途実装してください。ショートカットを使えない利用者も同じ操作へ到達できる UI が必要です。Command は React Aria の ComboBox と ListBox を利用して検索、フォーカス、項目選択を管理します。