SpeedDial | Neural UI v2

Uso

items define claves estables y etiquetas de acción. Conecta open y acepta openChange para controlar la visibilidad; null habilita el estado local. direction y type eligen la distribución; radius es la distancia radial y mask añade un fondo opcional. Reserva espacio alrededor del activador. Los Templates aportan contenido visual mientras Core mantiene nombres y controles accesibles.

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

disabled

radius

mask

hideOnClickOutside

Opciones avanzadas · 5

<div class="remaining-speed-stage">
  <neu-speed-dial
    [items]="items()"
    [open]="open()"
    (openChange)="open.set($event)"
    [disabled]="false"
    [direction]="'up'"
    [type]="'linear'"
    [radius]="64"
    [mask]="false"
    [hideOnClickOutside]="true"
    (itemActivate)="record('itemActivate', $event.item.key)"
  [ariaLabel]="'Acciones rápidas'"
></neu-speed-dial>
</div>

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 items = signal([
  {
    "key": "create",
    "label": "Crear",
    "icon": "add"
  },
  {
    "key": "share",
    "label": "Compartir",
    "icon": "move-right"
  },
  {
    "key": "delete",
    "label": "Eliminar",
    "icon": "close",
    "disabled": true
  }
]);

export const open = signal(false);

Inputs de datos, callbacks y configuración estructurada

Estos inputs requieren un modelo o función, no un checkbox. Modifica el campo del mismo nombre en el componente de Código y enlázalo al template; los datos que ya usa esta vista previa se muestran en el estado anterior.

animation · Readonly<NeuSpeedDialAnimationConfig>

En Código: define animation con este tipo y utiliza [animation]="animation" (o animation() si es una signal).

items · readonly NeuSpeedDialItem[]

En Código: define items con este tipo y utiliza [items]="items" (o items() si es una signal).

tooltip · Readonly<NeuSpeedDialTooltipConfig> | null

En Código: define tooltip con este tipo y utiliza [tooltip]="tooltip" (o tooltip() si es una signal).

Estado y eventos

items define claves estables y etiquetas de acción. Conecta open y acepta openChange para controlar la visibilidad; null habilita el estado local. direction y type eligen la distribución; radius es la distancia radial y mask añade un fondo opcional. Reserva espacio alrededor del activador. Los Templates aportan contenido visual mientras Core mantiene nombres y controles accesibles.

Accesibilidad y teclado

Intro/Espacio abre el activador. Las flechas recorren acciones habilitadas; Escape cierra y devuelve el foco.

Tecla	Acción
`Tab`	Recorre el activador y las acciones nativas disponibles.
`Enter`	Abre el menú desde su activador o ejecuta la acción habilitada enfocada.
`Space`	Abre el menú desde su activador o ejecuta la acción habilitada enfocada.
`Arrow keys`	Mueve el foco entre las acciones disponibles según la orientación del menú.
`Home`	Enfoca la primera acción disponible del menú.
`End`	Enfoca la última acción disponible del menú.
`Escape`	Cierra el menú de acciones y devuelve el foco al activador.

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
`animation`	`Readonly<NeuSpeedDialAnimationConfig>`	`{}`	`[animation]`	Ajustes opcionales de retardo entre elementos y giro del activador.
`ariaDescribedBy`	`string \| null`	`null`	`[ariaDescribedBy]`	IDs de los elementos que describen el control, separados por espacios.
`ariaLabel`	`string \| null`	`'Quick actions'`	`[ariaLabel]`	Nombre accesible del control o región.
`ariaLabelledBy`	`string \| null`	`null`	`[ariaLabelledBy]`	Ids de elementos existentes que dan nombre al control o región.
`direction`	`NeuSpeedDialDirection`	`'up'`	`[direction]`	Dirección en la que se despliegan las acciones rápidas: up, down, left o right.
`disabled`	`boolean`	`false`	`[disabled]`	Impide interactuar con este control.
`hideOnClickOutside`	`boolean`	`true`	`[hideOnClickOutside]`	Cierra la lista de acciones rápidas al pulsar fuera.
`id`	`string \| undefined`	Sin valor por defecto	`[id]`	Id estable opcional del elemento. Conserva ids únicos si muestras varios menús.
`items`	`readonly NeuSpeedDialItem[]`	`[]`	`[items]`	Colección aplicada de elementos. Claves y accesores estables identifican las entradas; el componente no modifica el array.
`mask`	`boolean`	`false`	`[mask]`	Muestra un fondo detrás del menú desplegado de acciones rápidas.
`open`	`boolean \| null`	`null`	`[open]`	Estado abierto aplicado; null permite visibilidad local. Acepta openChange para cambios controlados.
`radius`	`number`	`80`	`[radius]`	Distancia en píxeles de las distribuciones radiales de acciones.
`tabindex`	`number`	`0`	`[tabindex]`	Orden de tabulación del activador de acciones rápidas.
`tooltip`	`Readonly<NeuSpeedDialTooltipConfig> \| null`	`null`	`[tooltip]`	Configuración opcional de tooltip; las etiquetas siguen siendo los nombres accesibles.
`type`	`NeuSpeedDialType`	`'linear'`	`[type]`	Distribución de acciones: linear, circle, semi-circle o quarter-circle.

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
`closed`	`NeuSpeedDialVisibilityEvent`	`(closed)="onClosed($event)"`	Informa del cierre de este componente. El tipo indica los datos emitidos.
`itemActivate`	`NeuSpeedDialItemEvent`	`(itemActivate)="onItemActivate($event)"`	Informa de la acción rápida y el evento original tras activarla.
`openChange`	`boolean`	`(openChange)="onOpenChange($event)"`	Propone el siguiente estado de visibilidad. Aplícalo a open cuando la visibilidad sea controlada.
`opened`	`NeuSpeedDialVisibilityEvent`	`(opened)="onOpened($event)"`	Informa de la apertura de este componente. El tipo indica los datos emitidos.
`triggerClick`	`MouseEvent`	`(triggerClick)="onTriggerClick($event)"`	Informa del click nativo del activador de acciones rápidas.

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
`NeuSpeedDialItemDirective`Ver ejemplo	Directiva pública de template	`ng-template[neuSpeedDialItem]`
`NeuSpeedDialTriggerDirective`Ver ejemplo	Directiva pública de template	`ng-template[neuSpeedDialTrigger]`

NeuSpeedDialItemDirectiveVer ejemplo

Directiva pública de template

ng-template[neuSpeedDialItem]

Declaración

Contexto completo

import type { NeuSpeedDialItemTemplateContext } from '@neural-ui/core/speed-dial';

import { NeuSpeedDialItemDirective } from '@neural-ui/core/speed-dial';

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

NeuSpeedDialTriggerDirectiveVer ejemplo

Directiva pública de template

ng-template[neuSpeedDialTrigger]

Declaración

import { NeuSpeedDialTriggerDirective } from '@neural-ui/core/speed-dial';

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

Contexto completo

import type { NeuSpeedDialTriggerTemplateContext } from '@neural-ui/core/speed-dial';

import { NeuSpeedDialTriggerDirective } from '@neural-ui/core/speed-dial';

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

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

NeuSpeedDialItemDirective

NeuSpeedDialItemDirective

Eventos: 0

NeuSpeedDialTriggerDirective

NeuSpeedDialTriggerDirective

Eventos: 0

Métodos públicos

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

Public Types

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

NeuSpeedDialAnimationConfigTypeScript

import type { NeuSpeedDialAnimationConfig } from '@neural-ui/core/speed-dial';

// Declaración pública (solo referencia)
export interface NeuSpeedDialAnimationConfig {
  readonly itemDelay?: number;
  readonly rotateTrigger?: boolean;
}

NeuSpeedDialDirectionTypeScript

import type { NeuSpeedDialDirection } from '@neural-ui/core/speed-dial';

// Declaración pública (solo referencia)
export type NeuSpeedDialDirection = 'up' | 'down' | 'left' | 'right' | 'up-left' | 'up-right' | 'down-left' | 'down-right';

NeuSpeedDialItemTypeScript

import type { NeuSpeedDialItem } from '@neural-ui/core/speed-dial';

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

NeuSpeedDialItemEventTypeScript

import type { NeuSpeedDialItem } from '@neural-ui/core/speed-dial';

import type { NeuSpeedDialItemEvent } from '@neural-ui/core/speed-dial';

// Declaración pública (solo referencia)
export interface NeuSpeedDialItemEvent {
  readonly item: NeuSpeedDialItem;
  readonly originalEvent: Event;
}

NeuSpeedDialItemTemplateContextTypeScript

import type { NeuSpeedDialItem } from '@neural-ui/core/speed-dial';

import type { NeuSpeedDialItemTemplateContext } from '@neural-ui/core/speed-dial';

// Declaración pública (solo referencia)
export interface NeuSpeedDialItemTemplateContext {
  readonly $implicit: NeuSpeedDialItem;
  readonly active: boolean;
  readonly disabled: boolean;
  readonly index: number;
  readonly open: boolean;
}

NeuSpeedDialTooltipConfigTypeScript

import type { NeuTooltipPosition } from '@neural-ui/core/tooltip';

import type { NeuSpeedDialTooltipConfig } from '@neural-ui/core/speed-dial';

// Declaración pública (solo referencia)
export interface NeuSpeedDialTooltipConfig {
  readonly position?: NeuTooltipPosition;
}

NeuSpeedDialTriggerTemplateContextTypeScript

import type { NeuSpeedDialTriggerTemplateContext } from '@neural-ui/core/speed-dial';

// Declaración pública (solo referencia)
export interface NeuSpeedDialTriggerTemplateContext {
  readonly $implicit: boolean;
  readonly open: boolean;
}

NeuSpeedDialTypeTypeScript

import type { NeuSpeedDialType } from '@neural-ui/core/speed-dial';

// Declaración pública (solo referencia)
export type NeuSpeedDialType = 'linear' | 'circle' | 'semi-circle' | 'quarter-circle';

NeuSpeedDialVisibilityEventTypeScript

import type { NeuSpeedDialVisibilityReason } from '@neural-ui/core/speed-dial';

import type { NeuSpeedDialVisibilityEvent } from '@neural-ui/core/speed-dial';

// Declaración pública (solo referencia)
export interface NeuSpeedDialVisibilityEvent {
  readonly originalEvent: Event | null;
  readonly reason: NeuSpeedDialVisibilityReason;
}

NeuSpeedDialVisibilityReasonTypeScript

import type { NeuSpeedDialVisibilityReason } from '@neural-ui/core/speed-dial';

// Declaración pública (solo referencia)
export type NeuSpeedDialVisibilityReason = 'trigger' | 'item' | 'escape' | 'outside' | 'mask' | 'disabled' | 'programmatic';

NeuTooltipPositionTypeScript

import type { NeuTooltipPosition } from '@neural-ui/core/tooltip';

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

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-dark`	Tono oscuro de marca; texto de Button outline y ghost en el tema claro	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#005fcc`
`--neu-primary-fg`	Contenido dibujado sobre el fondo primario	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#ffffff`
`--neu-primary-solid`	Fondo de las acciones de marca sólidas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#006ee6`
`--neu-primary-solid-fg`	Contenido de las acciones de marca sólidas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#ffffff`
`--neu-primary-solid-hover`	Fondo de las acciones sólidas al pasar el puntero	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#005fcc`
`--neu-surface`	Superficie principal del campo, cabecera o control	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#ffffff`

Componentes relacionados

Consulta los componentes relacionados cuando necesites otra interacción o un control compuesto.