Command palette API · Needless UI

Import

import-command.ts

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

NuiCommandPalette

A modal dialog with a search field over your commands.

Selector: nui-command-palette

NuiCommandPalette: Properties
Name	Type	Default	Description
`commands`Input	`NuiCommand[]`		The commands, as `NuiCommand` objects.
`open`Two-way	`boolean`	`false`	Whether the palette is open.
`hotkey`Input	`string \| null`	`'mod+k'`	The shortcut that opens and closes it from anywhere, or `null` for none. `mod` is ⌘ on Apple devices and Ctrl elsewhere.
`bindShortcuts`Input	`boolean`	`false`	Also runs commands by their own shortcuts, anywhere on the page.
`loop`Input	`boolean`	`true`	Down on the last command goes to the first, and up on the first to the last.
`filtering`Input	`boolean`	`true`	Filters as you type. Turn it off when a server filters the commands.
`loading`Input	`boolean`	`false`	Shows a loading row while results are on their way.
`hints`Input	`boolean`	`true`	Shows the keys to use at the bottom.
`virtual`Input	`boolean \| 'auto'`	`'auto'`	Renders only the rows in view: always, never, or `auto` past 200 rows.
`label`Input	`string`	`'Command palette'`	Accessible name of the dialog and its search field.
`placeholder`Input	`string`	`'Type a command or search…'`	Text shown in the empty search field.
`run`Output	`NuiCommand`		Emits each command that runs.
`queryChange`Output	`string`		Emits the text as it’s typed, for a server search.
`show`Method	`() => void`		Opens the palette.
`hide`Method	`() => void`		Closes the palette.
`toggle`Method	`() => void`		Opens the palette, or closes it.
`back`Method	`() => void`		Goes back to the page before.

Every text it shows or announces is an input too, so you can translate it: emptyLabel loadingLabel backLabel closeLabel moveLabel chooseLabel

NuiCommand

One command, or a page of them.

NuiCommand: Properties
Name	Type	Description
`label`Property	`string`	The text shown and searched.
`description`Property	`string`	Secondary text under the label.
`group`Property	`string`	Commands with the same group are listed under that heading.
`keywords`Property	`string[]`	More words the search matches, such as synonyms.
`shortcut`Property	`string`	Keys shown with it, such as `mod+shift+p`.
`disabled`Property	`boolean`	Shown, but it can’t run.
`children`Property	`NuiCommand[]`	Commands one level down: choosing this one opens them as a page.
`run`Property	`() => void`	Runs when it’s chosen, once the palette has closed.
`id`Property	`string`	For your own use, such as telling commands apart in `(run)`.