Componente Stepper para Angular | ng-hub-ui-stepper
Componente stepper para Angular con validación, orientaciones, controles personalizados, i18n y theming mediante variables CSS.
Visión General
Por qué los equipos buscan esta librería
Este componente stepper para Angular es útil para flujos guiados de varios pasos donde la validación, las reglas de progresión y la marca deben permanecer bajo tu control.
Instalación
npm install ng-hub-ui-stepperIr a
Ideal para
- flujos de checkout
- formularios wizard
- onboarding
- pasos de configuración
Sobre stepper
ng-hub-ui-stepper ayuda a las aplicaciones Angular a estructurar onboarding, checkout y formularios tipo wizard. Ofrece a los equipos una forma reutilizable de controlar la progresión entre pasos, la validación y la lógica de navegación sin incrustar esas reglas manualmente en cada flujo.
Guías de uso
Uso principal
Configuración básica y comportamiento de la orientación.
Ejemplos:
Uso básico
Uso básico
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
Orientación
Orientación
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
Títulos truncados y tooltip
Títulos truncados y tooltip
Long step titles are clipped to an ellipsis. Hover the nav title above to read the full text.
Flujos avanzados
Validación, i18n, RTL, navegación dirigida por API, controles personalizados y cabeceras de paso personalizadas.
Ejemplos:
Validación
Validación
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
Control programático
Control programático
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
Event: -
Navegación personalizada
Navegación personalizada
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
Controles personalizados
Controles personalizados
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
Animaciones
Animaciones
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
Internacionalización (i18n)
Internacionalización (i18n)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
De derecha a izquierda (RTL)
De derecha a izquierda (RTL)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
Estilizado
Personalización del tema en tiempo de ejecución a través del servicio de tema.
Ejemplos:
Tematización
Tematización
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus.
Características clave
Cambios recientes
Version 21.2.0 - 3/19/26, 12:00 AM
added: StepperAnimationDirection enum exported for typed animation direction values.
added: Step indexes are now automatically assigned by StepperComponent via a reactive effect — no manual [index] binding required.
changed: StepComponent.index is now an internal writable signal. Remove all [index]="N" bindings from hub-step templates.
changed: StepComponent.disabled simplified to a direct signal input (input(false)), removing the getter/setter and disabled$ backing signal.
changed: StepperComponent.currentIndex is now a writable signal — call as currentIndex() instead of the previous getter.
changed: Renamed internal signals: removed $ suffix from currentIndex, contentAnimating, animationDirection.
removed: StepComponent.disabled$ backing signal removed. Use the disabled signal input directly.
removed: [index] template binding removed from StepComponent — managed internally.
Version 21.1.0 - 3/18/26, 12:00 AM
added: Angular 21 support with Signals-based architecture.
added: contentChild and contentChildren for step and directive discovery.
changed: All components and directives converted to standalone.
fixed: Fixed step indices and validation during dynamic step additions.