Компонент Stepper для Angular | ng-hub-ui-stepper
Компонент stepper для Angular с валидацией, режимами ориентации, пользовательскими элементами управления, i18n и тематизацией через CSS-переменные.
Overview
Why teams search for this library
Этот компонент stepper для Angular полезен для управляемых многошаговых потоков, где валидация, правила продвижения и брендинг должны оставаться под вашим контролем.
Install
npm install ng-hub-ui-stepperJump to
Ideal for
- потоки оформления заказа
- формы-мастера
- онбординг
- шаги конфигурации
About stepper
ng-hub-ui-stepper помогает приложениям Angular структурировать онбординг, оформление заказа и формы в стиле мастера. Он даёт командам переиспользуемый способ управлять продвижением по шагам, валидацией и логикой навигации, не вшивая эти правила вручную в каждый поток.
Feature guides
Основное использование
Базовая настройка и поведение ориентации.
Examples:
Базовое использование
Базовое использование
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.
Ориентация
Ориентация
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.
Продвинутые сценарии
Валидация, i18n, RTL, навигация на основе API, пользовательские контролы и пользовательские заголовки шагов.
Examples:
Валидация
Валидация
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.
Программное управление
Программное управление
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: -
Пользовательская навигация
Пользовательская навигация
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.
Пользовательские элементы управления
Пользовательские элементы управления
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.
Анимации
Анимации
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.
Интернационализация (i18n)
Интернационализация (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.
Справа налево (RTL)
Справа налево (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.
Стилизация
Настройка темы во время выполнения через theme service.
Examples:
Темизация
Темизация
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.
Key features
Recent changes
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.