Needless UI

コンポーネント

コマンドパレット

アプリのあらゆるコマンドを、キー操作ひとつで。

インポート

import-command.ts
import { type NuiCommand, NuiCommandPalette } from '@needless-ui/angular/command';

NuiCommandPalette

コマンドを検索するフィールドを備えたモーダルダイアログ。

セレクター
nui-command-palette
名前型デフォルト説明
commands入力NuiCommand[]コマンド。NuiCommand オブジェクトで指定します。
open双方向booleanfalseパレットが開いているかどうか。
hotkey入力string | null'mod+k'どこからでもパレットを開閉するショートカット。不要なら null。mod は Apple デバイスでは ⌘、それ以外では Ctrl です。
bindShortcuts入力booleanfalseページのどこにいても、各コマンド自身のショートカットでコマンドを実行できるようにします。
loop入力booleantrue最後のコマンドで下に進むと最初に、最初のコマンドで上に進むと最後に移動します。
filtering入力booleantrue入力に合わせて絞り込みます。サーバー側でコマンドを絞り込む場合はオフにします。
loading入力booleanfalse結果を待っている間、読み込み中の行を表示します。
hints入力booleantrue使えるキーを下部に表示します。
virtual入力boolean | 'auto''auto'表示範囲の行だけをレンダリングします。常に行う、行わない、200行を超えたら行う auto のいずれか。
label入力string'Command palette'ダイアログとその検索フィールドのアクセシブルな名前。
placeholder入力string'Type a command or search…'空の検索フィールドに表示するテキスト。
run出力NuiCommandコマンドが実行されるたびに、そのコマンドを出力します。
queryChange出力string入力中のテキストを出力します。サーバー検索に使います。
showメソッド() => voidパレットを開きます。
hideメソッド() => voidパレットを閉じます。
toggleメソッド() => voidパレットを開きます。開いていれば閉じます。
backメソッド() => void前のページに戻ります。

表示や読み上げに使うテキストもすべて入力なので、翻訳できます： emptyLabel loadingLabel backLabel closeLabel moveLabel chooseLabel

NuiCommand

1つのコマンド、またはコマンドを集めたページ。

名前型デフォルト説明
labelプロパティstring表示され、検索の対象になるテキスト。
descriptionプロパティstringラベルの下に表示する補足テキスト。
groupプロパティstring同じグループのコマンドは、その見出しの下にまとめて表示されます。
keywordsプロパティstring[]検索でマッチさせる追加の語。たとえば同義語。
shortcutプロパティstring一緒に表示するキー。たとえば mod+shift+p。
disabledプロパティboolean表示はされますが、実行できません。
childrenプロパティNuiCommand[]1階層下のコマンド。このコマンドを選ぶと、それらがページとして開きます。
runプロパティ() => void選ばれたとき、パレットが閉じてから実行されます。
idプロパティstring自由に使える値。たとえば (run) でコマンドを区別するのに使います。