Stepper

Uso

steps aporta etiquetas, descripciones opcionales y estados completed y disabled. activeStep empieza en 0; acepta stepChange para actualizarlo. linear impide saltar más de un paso hacia delante salvo que el actual esté marcado completed. next() y prev() proponen pasos contiguos y respetan disabled. Renderiza el contenido activo con el control de flujo de Angular dentro del componente.

Ejemplos

Prueba el comportamiento y abre Código para consultar la implementación.

Prueba y configura

Cambia las opciones y prueba el resultado. El template generado sigue tu configuración; Código contiene la implementación ejecutable completa.

<neu-stepper
  #wizard
  [steps]="steps()"
  [activeStep]="active()"
  [linear]="true"
  (stepChange)="active.set($event)"
>
  @switch (active()) {
    @case (0) { <p>Datos de contacto</p> }
    @case (1) { <p>Dirección de entrega</p> }
    @case (2) { <p>Revisar pedido</p> }
  }
  <button neu-button (neuClick)="wizard.next()">
    Continuar
  </button>
</neu-stepper>

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

export const steps = signal([
  {
    "label": "Contacto",
    "description": "Tus datos",
    "completed": false
  },
  {
    "label": "Entrega",
    "description": "Dirección"
  },
  {
    "label": "Revisión",
    "description": "Confirmar pedido",
    "disabled": false
  }
]);

export const active = signal(0);

Datos y contenido

La aplicación gestiona activeStep, finalización y validación. next() no marca el paso como completado ni valida un formulario. La proyección por defecto es contenido normal, no una directiva neuStepContent.

Accesibilidad y teclado

El botón activo tiene aria-current="step". Los pasos deshabilitados no reciben foco. Usa Tab entre botones habilitados e Intro o Espacio para proponer un paso. En pantallas compactas las etiquetas siguen disponibles en el nombre accesible y el tooltip.

API

Inputs y Outputs corresponden al paquete fijado. Los tipos con nombre enlazan a sus definiciones; cada Template 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.

Métodos públicos

Public Types

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

import type { NeuStepperStep } from '@neural-ui/core/stepper';

// Declaración pública (solo referencia)
export interface NeuStepperStep {
  completed?: boolean;
  description?: string;
  disabled?: boolean;
  label: string;
}

Estilos y tokens

Utiliza tokens públicos de espaciado, superficie, texto y foco. Comprueba el contenido proyectado y los controles en ambos temas y con anchos reducidos.

Componentes relacionados

Combina estos componentes para construir la interfaz del entorno.

• Table
• Tabs