Stepper | Neural Native

Importación

component.ts

import { NeuStepperComponent } from '@neural-ui/native/stepper';

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.

Un espacio que se siente tuyo

Completa el nombre, configura las preferencias y revisa los datos antes de finalizar. Los pasos muestran el avance del formulario.

Ver y copiar el ejemplo completo

basic.component.ts

import { Component, signal, computed } from '@angular/core';
import { NeuInputComponent } from '@neural-ui/native/input';
import { NeuSwitchComponent } from '@neural-ui/native/switch';
import { NeuCardComponent } from '@neural-ui/native/card';
import { NeuStepperComponent } from '@neural-ui/native/stepper';
import { View, Text, ScrollView } from '@ng-native/components';
import type { NeuOption } from '@neural-ui/native';

@Component({
  selector: 'app-example',
  imports: [NeuInputComponent, NeuSwitchComponent, NeuCardComponent, NeuStepperComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="true"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">Un espacio que se siente tuyo</text><text class="product-caption">Tres pequeños pasos para empezar</text></view><view class="product-section"><neu-stepper finishLabel="Terminar" previousLabel="Anterior" nextLabel="Siguiente" [steps]="steps" [activeStep]="step()" (activeStepChange)="visitStep($event)" [linear]="true" [completed]="completed()" (finished)="finished.set(true)">
      @if (step() === 0) {
        <neu-input requiredLabel="Obligatorio" label="Nombre completo" placeholder="Introduce tu nombre" hint="Introduce un nombre para continuar" [(value)]="name" />
      } @else if (step() === 1) {
        <neu-switch label="Avisos por correo" hint="Puedes cambiar esta preferencia más adelante" [(checked)]="updates" />
      } @else {
        <neu-card title="Revisa tu perfil" [description]="name()">
          <text>{{ updates() ? 'Avisos por correo activados' : 'Avisos por correo desactivados' }}</text>
        </neu-card>
      }
    </neu-stepper>
    <text>{{ finished() ? 'Configuración inicial completada' : 'Paso ' + (step() + 1) + ' de ' + steps.length }}</text></view></view></scroll-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); }

  `,
})
export class ExampleComponent {
  readonly steps: readonly NeuOption[] = [{ id: 'profile', label: 'Perfil' }, { id: 'preferences', label: 'Preferencias' }, { id: 'review', label: 'Revisión' }];
  readonly step = signal(0);
  readonly name = signal('');
  readonly updates = signal(true);
  readonly visited = signal<readonly string[]>([]);
  readonly finished = signal(false);
  readonly completed = computed(() => [
    ...(this.name().trim() ? ['profile'] : []),
    ...this.visited().filter(id => id !== 'profile'),
  ]);
  visitStep(index: number): void {
    this.step.set(index);
    const id = this.steps[index]?.id;
    if (id) this.visited.update(ids => ids.includes(id) ? ids : [...ids, id]);
  }
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

Stepper · android · native capture — **Android**Captura nativa

Stepper · ios · native capture — **iOS**Captura nativa

Personalización

Contenido proyectado

Entre los indicadores de pasos y los botones de navegación. Muestra el formulario o resumen del paso actual a partir de activeStep().

Utiliza elementos nativos de @ng-native/components y controles públicos de Neural Native. Los estilos Angular pertenecen al componente que declara este contenido.

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
steps	readonly NeuOption[]	[]	Input	Definiciones ordenadas de pasos. La propiedad activeStep utiliza su posición en el array empezando por cero.
linear	boolean	false	Input	Exige completar los pasos anteriores antes de avanzar por el stepper.
completed	readonly string[]	[]	Input	IDs de los pasos que la aplicación considera completados.
disabled	boolean	false	Input	Desactiva la interacción del usuario. La aplicación puede seguir proporcionando valores.
previousLabel	string	'Previous'	Input	Texto o nombre accesible utilizado para anterior. No ejecuta la acción por sí solo.
nextLabel	string	'Next'	Input	Texto o nombre accesible utilizado para siguiente. No ejecuta la acción por sí solo.
finishLabel	string	'Finish'	Input	Texto o nombre accesible utilizado para finalizar. No ejecuta la acción por sí solo.

Models

Nombre	Tipo	Predeterminado	Enlace	Descripción
activeStep	number	0	Model · bidireccional	Posición del paso actual, empezando por cero. Enlaza una signal escribible mediante [(activeStep)].

Outputs

Nombre	Payload	Cuándo se emite
activeStepChange	number	Emite el valor actualizado de activeStep. [(activeStep)] enlaza este output junto con su input model.
finished	void	Solicita completar el stepper. Tu aplicación decide la operación resultante.

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 activeStep = signal<number>(0);

Tipos e interfaces de datos

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

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.