コマンドパレットCommandPaletteExperimental
ナビゲーションやアクション用のグローバルコマンドパレットです。
プレビュー
状態とバリエーション
標準表示
グローバルな移動先とアクションをまとめ、キーボードショートカットでも開けるようにします。
キーボードから開く場合は ⌘K
少数コマンド
小さなアプリではグループを絞り、空状態や検索文言だけを用途に合わせます。
キーボードから開く場合は ⌘K
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| open | boolean | - | パレットの開閉状態。 |
| onOpenChange | (open: boolean) => void | - | 開閉状態が変わった時に呼ばれるハンドラ。 |
| groups | CommandPaletteGroup[] | [] | 見出しとコマンド項目の配列。 |
| placeholder | string | "Type a command or search..." | 検索入力のプレースホルダー。 |
| emptyMessage | ReactNode | "No results found." | 検索結果がない時に表示する文言。 |
| dialogTitle | ReactNode | "Command Menu" | ダイアログのアクセシブルタイトル。 |
| clearLabel | string | "Clear search" | 検索クリアボタンの aria-label とツールチップ文言。 |
| portalContainer | HTMLElement | null | - | docs プレビューや擬似ブラウザ内にパレットを閉じ込めたい時のポータル先。 |
使い方
Loading...