CommandPalette

Busca comandos agrupados de la aplicación y activa acciones o enlaces.

Categoría: Navegación
Import: @neural-ui/core/command-palette
Selector: neu-command-palette

import { NeuCommandPaletteComponent } from '@neural-ui/core/command-palette';

Uso

Asigna un id único y un kind a cada comando: action, router o link. Las acciones emiten commandAction; procesa el id en tu aplicación. Router y link utilizan sus destinos nativos. Abre con el activador o Ctrl/Meta+K. shortcut es un dato visual, no un atajo registrado. Usa el Template para contenido, sin anidar otro control interactivo.

Ejemplos

Prueba esta interacción gestionada por la aplicación. Código incluye los eventos y los datos iniciales.

Eventos: 0

Prueba y configura

Cambia las opciones públicas, prueba el resultado y consulta el template actualizado. Código contiene la implementación ejecutable completa.

Eventos: 0

empty

disableLast

<button neu-button (neuClick)="palette.open()">
  {{ t("Open command palette", "Abrir paleta de comandos") }}</button
><neu-command-palette
  #palette
  [commands]="commands()"
  (commandAction)="record('commandAction', $event.id)"
></neu-command-palette>

Estado y datos de esta configuración

Estos valores corresponden a la vista previa actual. Los handlers, imports de Core y templates completos están en Código.

import { signal } from '@angular/core';

export const commands = signal([
  {
    "id": "save",
    "kind": "action",
    "label": "Guardar borrador",
    "group": "Acciones",
    "description": "Conservar los cambios localmente",
    "shortcut": "Ctrl+S"
  },
  {
    "id": "home",
    "kind": "router",
    "label": "Inicio",
    "routerLink": "/es"
  },
  {
    "id": "disabled",
    "kind": "action",
    "label": "Archivar",
    "disabled": false
  }
]);

import type { NeuCommand } from '@neural-ui/core/command-palette';

readonly commands = signal<readonly NeuCommand[]>([
  {
    "id": "save",
    "kind": "action",
    "label": "Guardar borrador",
    "group": "Acciones",
    "description": "Conservar los cambios localmente",
    "shortcut": "Ctrl+S"
  },
  {
    "id": "home",
    "kind": "router",
    "label": "Inicio",
    "routerLink": "/es"
  },
  {
    "id": "disabled",
    "kind": "action",
    "label": "Archivar",
    "disabled": false
  }
]);

Estado y eventos

Accesibilidad y teclado

Ctrl/Meta+K abre la paleta. Escribe para buscar, las flechas recorren resultados, Intro activa y Escape cierra y devuelve el foco.

Tecla	Acción
`Ctrl / Meta + K`	Abre la paleta cuando su atajo está habilitado.
`Tab`	Recorre el campo de búsqueda y los controles disponibles.
`ArrowDown / ArrowUp`	Recorre los resultados de búsqueda disponibles.
`Home`	Enfoca el primer resultado.
`End`	Enfoca el último resultado.
`Enter`	Activa el resultado enfocado.
`Escape`	Cierra la paleta y restablece el foco.

API

Inputs, modelos y Outputs se extraen del paquete Core instalado. Los tipos públicos enlazan a sus definiciones. Los Templates incluyen ejemplos ejecutables.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Nombre	Tipo	Por defecto	Uso en el template	Descripción
`commands`	`readonly NeuCommand[]`	`[]`	`[commands]`	Comandos buscables con ids estables y tipos action, router o link.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

Nombre	Valor emitido	Uso en el template	Descripción
`commandAction`	`NeuCommandAction`	`(commandAction)="onCommandAction($event)"`	Emite el comando de acción activado; procesa su id en la aplicación. Los enlaces usan sus destinos nativos.

Templates

ng-content proyecta contenido dentro del componente. Los inputs TemplateRef reciben un template; las directivas ng-template identifican templates con un contexto tipado. Una directiva compartida en el entrypoint no es necesariamente un slot de este componente.

Nombre	Mecanismo	Contrato
`NeuCommandPaletteItemDirective`Ver ejemplo	Directiva pública de template	`ng-template[neuCommandPaletteItem]`

NeuCommandPaletteItemDirectiveVer ejemplo

Directiva pública de template

ng-template[neuCommandPaletteItem]

Declaración

import { NeuCommandPaletteItemDirective } from '@neural-ui/core/command-palette';

// Declaración pública (solo referencia)
export declare class NeuCommandPaletteItemDirective {
}

Contexto completo

import type { NeuCommandPaletteItemContext } from '@neural-ui/core/command-palette';

import { NeuCommandPaletteItemDirective } from '@neural-ui/core/command-palette';

// Declaración pública (solo referencia)
readonly templateRef: TemplateRef<NeuCommandPaletteItemContext>;

Cada ejemplo muestra un template diferente. Alterna entre Demo y Código para consultar su implementación, imports y estado.

NeuCommandPaletteItemDirective

NeuCommandPaletteItemDirective

Eventos: 0

Métodos públicos

Nombre	Contrato
`close`	`close(): void;`
`open`	`open(): void;`

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

NeuCommandTypeScript

import type { NeuCommandAction } from '@neural-ui/core/command-palette';
import type { NeuCommandLink } from '@neural-ui/core/command-palette';
import type { NeuCommandRouterLink } from '@neural-ui/core/command-palette';

import type { NeuCommand } from '@neural-ui/core/command-palette';

// Declaración pública (solo referencia)
export type NeuCommand = NeuCommandAction | NeuCommandRouterLink | NeuCommandLink;

NeuCommandActionTypeScript

import type { NeuCommandBase } from '@neural-ui/core/command-palette';

import type { NeuCommandAction } from '@neural-ui/core/command-palette';

// Declaración pública (solo referencia)
export interface NeuCommandAction extends NeuCommandBase {
  readonly action?: never;
  readonly href?: never;
  readonly kind: 'action';
  readonly routerLink?: never;
  readonly target?: never;
}

NeuCommandBaseTypeScript

import type { NeuCommandBase } from '@neural-ui/core/command-palette';

// Declaración pública (solo referencia)
export interface NeuCommandBase {
  readonly description?: string;
  readonly disabled?: boolean;
  readonly group?: string;
  readonly icon?: string;
  readonly id: string;
  readonly keywords?: readonly string[];
  readonly label: string;
  readonly shortcut?: string;
}

NeuCommandLinkTypeScript

import type { NeuCommandBase } from '@neural-ui/core/command-palette';

import type { NeuCommandLink } from '@neural-ui/core/command-palette';

// Declaración pública (solo referencia)
export interface NeuCommandLink extends NeuCommandBase {
  readonly action?: never;
  readonly href: string;
  readonly kind: 'link';
  readonly routerLink?: never;
  readonly target?: string;
}

NeuCommandPaletteItemContextTypeScript

import type { NeuCommand } from '@neural-ui/core/command-palette';

import type { NeuCommandPaletteItemContext } from '@neural-ui/core/command-palette';

// Declaración pública (solo referencia)
export interface NeuCommandPaletteItemContext {
  readonly $implicit: NeuCommand;
  readonly index: number;
}

NeuCommandRouterLinkTypeScript

import type { NeuCommandBase } from '@neural-ui/core/command-palette';

import type { NeuCommandRouterLink } from '@neural-ui/core/command-palette';

// Declaración pública (solo referencia)
export interface NeuCommandRouterLink extends NeuCommandBase {
  readonly action?: never;
  readonly href?: never;
  readonly kind: 'router';
  readonly routerLink: string | readonly unknown[];
  readonly target?: never;
}

Estilos y tokens

Usa los tokens públicos de la referencia. El diseño del contenedor pertenece a tu aplicación; comprueba el resultado en modo claro y oscuro y en espacios estrechos.

Tokens específicos

Este componente utiliza tokens compartidos del tema en lugar de tokens específicos.

Tokens compartidos utilizados

Sobrescríbelos en un contenedor local para afectar a este ejemplo. Una modificación en :root afecta a los demás componentes que utilizan el mismo token.

Token	Efecto aquí	Otros efectos	Valor / alternativa
`--neu-border`	Bordes normales de controles y celdas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`rgba(15, 23, 42, 0.08)`
`--neu-primary`	Color de marca en controles activos y énfasis	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#007aff`
`--neu-primary-50`	Superficie tenue de marca para estados de puntero y foco	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#eff6ff`
`--neu-surface`	Superficie principal del campo, cabecera o control	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#ffffff`
`--neu-surface-2`	Superficies secundarias y filas alternas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#f1f5f9`
`--neu-text`	Color del texto principal y de los iconos que lo heredan	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#0f172a`
`--neu-text-muted`	Etiquetas secundarias y contenido de ayuda	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#475569`
`--neu-cmd-shadow`	Elevación de la superficie o capa	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`var(--neu-shadow-lg)`