Dock

Visión general

Dock reúne acciones frecuentes en una barra compacta. Proporciona un array items de NeuDockItem, cada uno con una key única y una label. Usa command para ejecutar una acción, routerLink para una ruta de la aplicación o url para un enlace. Los iconos son opcionales y los resuelve tu aplicación; active marca el destino actual.

position establece una barra horizontal para top/bottom y vertical para left/right; no fija el dock al viewport. magnification amplía los elementos al pasar el cursor con un puntero preciso. breakpoint activa la presentación móvil compacta.

Interacción básica

Activa Espacio de trabajo, Documentos o Buscar. Cada elemento ejecuta su command y emite itemClick; los contadores inferiores muestran ambas acciones. Ajustes comienza desactivado. Abre Código para ver la definición de los elementos y sus eventos.

Configurador

Cambia las opciones, prueba el resultado y consulta el template actualizado. Abre Código para ver el modelo de datos y la implementación completa.

<neu-dock
  [items]="dockItems()"
  ariaLabel="Navegación de ejemplo"
  position="bottom"
  direction="ltr"
  breakpoint="960px"
  [magnification]="true"
  (itemClick)="selectItem($event)"
/>

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

export const dockItems = signal([
  {
    "key": "home",
    "label": "Espacio de trabajo",
    "icon": "home",
    "active": true,
    "command": () => { /* Handler in the complete example. */ }
  },
  {
    "key": "files",
    "label": "Documentos",
    "icon": "folder",
    "badge": 3,
    "command": () => { /* Handler in the complete example. */ }
  },
  {
    "key": "search",
    "label": "Buscar",
    "icon": "search",
    "command": () => { /* Handler in the complete example. */ }
  },
  {
    "key": "settings",
    "label": "Ajustes",
    "icon": "settings",
    "disabled": true,
    "command": () => { /* Handler in the complete example. */ }
  }
]);

Datos y contenido

itemClick comunica la activación después de command. itemFocus e itemBlur comunican eventos de foco. La aplicación gestiona trabajo, rutas y datos active; Core gestiona presentación y teclado. neuDockItem sustituye el contenido con item, active e index y conserva el enlace/botón y su nombre accesible.

Accesibilidad y teclado

Nombra el dock. Tab accede al elemento activo disponible; las flechas siguen orientación/dirección e Inicio/Fin van a los extremos. Las acciones ocultas/desactivadas quedan fuera del foco móvil. Intro/Espacio activan acciones; los enlaces conservan su navegación nativa. El tooltip es complementario, no el único nombre accesible. Los Templates no deben añadir controles interactivos anidados.

API

Inputs y Outputs corresponden al paquete instalado. Los tipos con nombre enlazan a sus definiciones. Cada Template/proyección disponible tiene un ejemplo ejecutable.

Inputs

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

Outputs

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

import { NeuDockItemDirective } from '@neural-ui/core/dock';

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

import type { NeuDockItemTemplateContext } from '@neural-ui/core/dock';

import { NeuDockItemDirective } from '@neural-ui/core/dock';

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

Public Types

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

import type { NeuDockItem } from '@neural-ui/core/dock';

// Declaración pública (solo referencia)
export interface NeuDockItem extends NeuMenuActionLike<NeuDockItem> {
  data?: unknown;
  key: string;
  label: string;
}

import type { NeuDockItem } from '@neural-ui/core/dock';

import type { NeuDockItemTemplateContext } from '@neural-ui/core/dock';

// Declaración pública (solo referencia)
export interface NeuDockItemTemplateContext {
  $implicit: NeuDockItem;
  active: boolean;
  index: number;
}

import type { NeuDockPosition } from '@neural-ui/core/dock';

// Declaración pública (solo referencia)
export type NeuDockPosition = 'top' | 'right' | 'bottom' | 'left';

Estilos y tokens

Utiliza los tokens públicos disponibles. La resolución de iconos y el diseño que rodea al ejemplo pertenecen a la aplicación. Comprueba ambos temas y pantallas estrechas.

Componentes relacionados

Compara los componentes de navegación relacionados para elegir la interacción adecuada.

• Menu
• MenuButton
• TieredMenu