DesignLayer
スプリング・コマンドパレット
コンポーネント一覧へ戻る
これは何か
⌘K（Windows は Ctrl+K）で開く検索とコマンドのダイアログです。上に入力欄、その下に Pages、Actions、Recent が並び、文字を打つと絞り込みます。項目は配列で渡します。SaaS のダッシュボード、開発ツール、管理画面に置けます。ダークとライトがあり、キーボードと Open palette ボタンの両方で開けます。
使いどころ
- SaaS のダッシュボード。ページ移動と操作を、キーボードから一つにまとめる。
- 開発ツール。コマンドを検索して、選んだ行だけをデモとして返す。
- 管理画面。最近開いた項目と、実行したい操作を同じダイアログに置く。
プロパティ
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| items | SpringCommandPaletteItem[] | demo items | 行の配列。各要素は id、label、group（pages / actions / recent）、任意の hint と keywords。デモの項目は架空です。 |
| variant | "dark" | "light" | "dark" | パネル、開くボタン、ステージのダーク / ライト。 |
| openLabel | string | Open palette (⌘K) | パレットを開くボタンの文言。タッチ端末はこのボタンで開きます。 |
| placeholder | string | Search commands… | 検索入力のプレースホルダー。 |
| title | string | Command palette | ダイアログのアクセシブルな名前。 |
| pagesLabel | string | Pages | Pages グループの見出し。 |
| actionsLabel | string | Actions | Actions グループの見出し。 |
| recentLabel | string | Recent | Recent グループの見出し。 |
| emptyLabel | string | No matching commands | 絞り込みが 0 件のときに出る文言。 |
| onSelect | (item) => void | — | Enter かクリックで行を選んだときに呼ばれ、そのあと閉じます。選択はデモで、画面遷移はしません。 |
| open | boolean | — | 開閉を外から制御するときの値。 |
| defaultOpen | boolean | false | 非制御のときの初期状態。 |
| onOpenChange | (open: boolean) => void | — | 開いたときと閉じたときに呼ばれます。 |
| className | string | — | 開くボタンのラッパーに足す class。 |
