Speed Dial | Neural Native

Importación

component.ts

import { NeuSpeedDialComponent } from '@neural-ui/native/speed-dial';

Ejemplos

Importa ExampleComponent en su padre y coloca <app-example /> dentro del neu-theme raíz de tu aplicación. El preview aporta el marco y las zonas seguras; utiliza la estructura raíz de Instalación en tu app.

Tu espacio

Crea una tarea, una nota o un proyecto desde el menú flotante. Cada opción añade un elemento visible al espacio.

Ver y copiar el ejemplo completo

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuCardComponent } from '@neural-ui/native/card';
import { NeuBadgeComponent } from '@neural-ui/native/badge';
import { NeuSpeedDialComponent } from '@neural-ui/native/speed-dial';
import { View, Text, ScrollView } from '@ng-native/components';
import type { NeuSpeedDialAction } from '@neural-ui/native/speed-dial';

@Component({
  selector: 'app-example',
  imports: [NeuCardComponent, NeuBadgeComponent, NeuSpeedDialComponent, View, Text, ScrollView],
  template: `
    <view class="dial-workspace"><view class="product-section"><text class="product-title" accessibilityRole="header">Tu espacio</text><text class="product-caption">Proyectos, notas y las tareas del día a día</text></view>
    <scroll-view class="product-scroll"><view class="product-stack">@for (item of items(); track item.id) {
      <neu-card [title]="item.title" [description]="item.description" variant="outlined"><neu-badge [label]="item.kind" tone="neutral" /></neu-card>
    }</view></scroll-view>
    <view class="dial-footer"><neu-speed-dial label="Crear" [actions]="actions" [(open)]="open" (activated)="onActivated($event)" /><text class="product-caption" accessibilityLiveRegion="polite">{{ items().length }} elementos en el espacio</text></view></view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }
.dial-workspace { flex: 1; flex-shrink: 1; min-height: 0; gap: 20px; } .dial-footer { padding-top: 12px; gap: 12px; }
  `,
})
export class ExampleComponent {
  readonly actions: readonly NeuSpeedDialAction[] = [
    { id: 'task', label: 'Nueva tarea', svg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="m5 12 4 4L19 6"/></svg>' },
    { id: 'note', label: 'Nueva nota', svg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M5 3h10l4 4v14H5Z M9 11h6M9 15h6"/></svg>' },
    { id: 'project', label: 'Nuevo proyecto', svg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M3 7V4h7l2 3h9v13H3Z"/></svg>' },
  ];
  readonly open = signal(false);
  readonly items = signal([{ id: 0, title: 'Revisar la bienvenida', kind: 'Tarea', description: 'Lanzamiento móvil · Hoy' }, { id: 1, title: 'Notas del lanzamiento', kind: 'Nota', description: 'Espacio del producto' }]);
  onActivated(id: string): void {
    const kind = id === 'task' ? 'Tarea' : id === 'note' ? 'Nota' : 'Proyecto';
    const title = id === 'task' ? 'Nueva tarea' : id === 'note' ? 'Nueva nota' : 'Nuevo proyecto';
    this.items.update(items => [...items, { id: items.length, title, kind, description: 'Listo para tu próxima idea' }]);
  }
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

Speed Dial · android · native capture — **Android**Captura nativa

Speed Dial · ios · native capture — **iOS**Captura nativa

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
label	string	'Quick actions'	Input	Nombre legible del control, acción o grupo.
actions	readonly NeuSpeedDialAction[]	[]	Input	Definiciones de acciones; la aplicación gestiona el ID de la acción solicitada.
disabled	boolean	false	Input	Desactiva la interacción del usuario. La aplicación puede seguir proporcionando valores.

Models

Nombre	Tipo	Predeterminado	Enlace	Descripción
open	boolean	false	Model · bidireccional	Indica si se solicita mantener abierta la presentación o mensaje. Enlaza una signal escribible mediante [(open)].

Outputs

Nombre	Payload	Cuándo se emite
openChange	boolean	Emite el valor actualizado de open. [(open)] enlaza este output junto con su input model.
activated	string	Emite el ID del elemento activado. Tu aplicación ejecuta la acción.

Estado de los models

Enlaza la signal con [(nombreModel)] sin llamarla. Utiliza nombreModel() para leer su valor.

model-fields.ts

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

// Fields inside your component class
readonly open = signal<boolean>(false);

Tipos e interfaces de datos

Utiliza los imports en tu aplicación. Las definiciones siguientes se muestran como referencia.

NeuSpeedDialAction

NeuSpeedDialAction.ts

import type { NeuSpeedDialAction } from '@neural-ui/native/speed-dial';
import type { NeuOption } from '@neural-ui/native';

// Public definition for reference only. Import this type; do not redeclare it.
export interface NeuSpeedDialAction extends NeuOption {
    /** Optional SVG markup for the action's circular button. */
    readonly svg?: string;
}

Campo	Tipo	Requisito	Significado
svg	string	Opcional	SVG opcional del icono del elemento. Nav lo muestra encima de la etiqueta del destino; SpeedDial lo sitúa dentro del círculo y utiliza la inicial de la etiqueta si se omite.
id	string	Obligatorio	Identificador estable y único para seguimiento y selección.
label	string	Obligatorio	Nombre legible del elemento.
description	string	Opcional	Texto de apoyo opcional; su presentación depende del control.
disabled	boolean	Opcional	Impide activar o seleccionar este elemento.

NeuOption

NeuOption.ts

import type { NeuOption } from '@neural-ui/native';

// Public definition for reference only. Import this type; do not redeclare it.
export interface NeuOption {
    readonly id: string;
    readonly label: string;
    readonly description?: string;
    readonly disabled?: boolean;
}

Campo	Tipo	Requisito	Significado
id	string	Obligatorio	Identificador estable y único para seguimiento y selección.
label	string	Obligatorio	Nombre legible del elemento.
description	string	Opcional	Texto de apoyo opcional; su presentación depende del control.
disabled	boolean	Opcional	Impide activar o seleccionar este elemento.