Componente Stepper para Angular | ng-hub-ui-stepper
Componente stepper para Angular con validación, orientaciones, controles personalizados, i18n y theming mediante variables CSS.
Referencia API
Aquí tienes el contrato completo de stepper: todo lo que puedes enlazar, escuchar, proyectar y personalizar, reunido en un solo sitio. Enlaza lo que necesites y dale el estilo que quieras — es standalone y reactivo con signals.
Inputs
Ajusta stepper a tu gusto con 13 inputs. Se enlazan como cualquier @Input de Angular.
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
options (hub-stepper) | StepperOptions | {} | Objeto de configuración del stepper: `layout` (`vertical` | `sidebar`) y `rtl` (boolean). |
variant (hub-stepper) | string | undefined | Acento semántico aplicado a la píldora del paso activo y a los controles de siguiente / enviar. Valores integrados: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `neutral`, `light`, `dark`; cualquier otra cadena se resuelve a través de `--hub-sys-color-<variant>`. |
backLabel (hub-stepper) | string | null | null | Sobrescribe la etiqueta del control "Back". Recurre a la etiqueta i18n integrada cuando es null. |
continueLabel (hub-stepper) | string | null | null | Sobrescribe la etiqueta del control "Continue". |
submitLabel (hub-stepper) | string | null | null | Sobrescribe la etiqueta del control "Submit" del paso final. |
truncateTitles (hub-stepper) | boolean | false | Recorta cada título de paso del riel a `--hub-stepper-nav-title-max-width` (por defecto `12rem`) y muestra el texto completo como tooltip cuando se desborda. |
railLabel (hub-stepper) | string | 'Steps' | Nombre accesible del tablist del raíl de pasos. |
nav (hub-stepper) | 'pills' | 'track' | 'pills' | Qué barra dibuja el asistente. `pills` es la de siempre. `track` es la variante en línea: un marcador numerado por paso, una marca en el paso que está en orden y un conector que toma el acento al salir de él. |
inOrderLabel (hub-stepper) | string | null | null | Lo que oye un lector de pantalla en un marcador con su marca. La marca en sí es decorativa, así que esto es lo único que dice que el paso está en orden. Si no se indica, cae en el diccionario que trae la biblioteca. |
beforeStepChange (hub-stepper) | StepperStepChangeGuard | null | null | Una puerta que el asistente consulta antes de moverse, para que el formulario pueda guardar primero. Se ejecuta con el índice todavía donde estaba, y devolver `false` —o una promesa que resuelva `false`, o un rechazo— deja el asistente donde está. Una salida no podría hacer esto: cuando salta, el paso ya ha cambiado. |
title (hub-step) | string | undefined | El título del paso que se muestra en la navegación del stepper. |
disabled (hub-step) | boolean | false | Deshabilita la navegación a este paso. |
valid (hub-step) | boolean | null | null | El veredicto del formulario sobre los datos de este paso. Tres estados, y el tercero importa: `true`, `false` o `null`, que quiere decir que nadie se ha pronunciado. La biblioteca no mira ningún formulario: anota la respuesta, y la barra razona con ella. |
Outputs
Reacciona a lo que hace stepper: 3 eventos a los que enganchar tu lógica.
| Nombre | Tipo | Descripción |
|---|---|---|
completed (hub-stepper) | OutputEmitterRef<void> | Se emite cuando el usuario envía el paso final. |
nextStep (hub-stepper) | OutputEmitterRef<number> | Se emite al avanzar a un paso, con el nuevo índice de paso. |
previousStep (hub-stepper) | OutputEmitterRef<number> | Se emite al retroceder a un paso, con el nuevo índice de paso. |
Templates
Hazlo tuyo — 4 plantillas para proyectar tu propio marcado.
| Nombre | Descripción | Ejemplo |
|---|---|---|
stepperNav / hubStepperNav | Sustituye por completo el riel de pasos por defecto. El contexto de la plantilla expone steps (las instancias StepComponent proyectadas) y currentIndex, así que se enlaza con let-steps="steps" y let-currentIndex="currentIndex". | <hub-stepper>
<ng-template hubStepperNav let-steps="steps" let-currentIndex="currentIndex">
<ol class="my-rail">
@for (step of steps; track step; let i = $index) {
<li [class.current]="i === currentIndex">{{ step.title() || 'Step ' + (i + 1) }}</li>
}
</ol>
</ng-template>
<hub-step title="Account">…</hub-step>
<hub-step title="Review">…</hub-step>
</hub-stepper> |
stepTrigger / hubStepTrigger | Sustituye el control que el riel integrado dibuja dentro de cada elemento, conservando el riel: su lista, su role="tablist", su orientación y su etiqueta. El contexto expone el paso como $implicit y como step, más title, index, isCurrent, isCompleted y disabled; activar el paso sigue siendo cosa tuya, a través de una referencia de plantilla en el host. Se ignora si hay una plantilla hubStepperNav. | <hub-stepper #wizard>
<ng-template hubStepTrigger let-title="title" let-index="index" let-isCurrent="isCurrent"
let-inOrder="inOrder" let-reachable="reachable">
<button type="button" role="tab" [attr.aria-selected]="isCurrent" [disabled]="!reachable" (click)="wizard.goTo(index)">
<span class="badge">{{ inOrder ? '✓' : index + 1 }}</span> {{ title }}
</button>
</ng-template>
<hub-step title="Account" [valid]="account.valid">…</hub-step>
<hub-step title="Review">…</hub-step>
</hub-stepper> |
provideHubStepper | Registra los diez diccionarios incluidos (en, es, ca, eu, gl, ast, an, de, zh y ar) y el HubTranslationService con el que los controles Volver / Continuar / Enviar resuelven su texto. Es lo que sustituye a StepperModule.forRoot(), que desaparece en la 23.0.0. | providers: [provideHubStepper({ language: 'en', fallbackLanguage: 'en' })] |
STEPPER_DICTIONARIES | Los diccionarios incluidos como objeto plano, exportados para registrar solo los idiomas que se publican o mezclarlos con un diccionario propio. Las claves son planas —BACK, CONTINUE y SUBMIT— porque es lo que resuelve el componente cuando falla su espacio HUBUI.STEPPER. | provideHubTranslation({ language: 'ca', dictionaries: { ca: { ...STEPPER_DICTIONARIES['ca'], ...myLabels } } }) |