Компонент Stepper для Angular | ng-hub-ui-stepper
Компонент stepper для Angular с валидацией, режимами ориентации, пользовательскими элементами управления, i18n и тематизацией через CSS-переменные.
Справочник API
Вот полный контракт stepper: всё, что можно привязать, прослушать, спроецировать и тематизировать, собрано в одном месте. Подключите то, что нужно, и оформите так, как хотите — это standalone и дружит с сигналами.
Входные свойства
Настройте stepper с помощью 7 входных свойств. Привязывайте их, как любой @Input в Angular.
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
options (hub-stepper) | StepperOptions | {} | Объект конфигурации stepper: `layout` (`vertical` | `sidebar`) и `rtl` (boolean). |
backLabel (hub-stepper) | string | null | null | Переопределяет метку контрола "Back". При значении null используется встроенная метка i18n. |
continueLabel (hub-stepper) | string | null | null | Переопределяет метку контрола "Continue". |
submitLabel (hub-stepper) | string | null | null | Переопределяет метку контрола "Submit" последнего шага. |
railLabel (hub-stepper) | string | 'Steps' | Доступное имя tablist рельса шагов. |
title (hub-step) | string | — | Заголовок шага, отображаемый в навигации stepper. |
disabled (hub-step) | boolean | false | Отключает навигацию к этому шагу. |
События
Реагируйте на то, что делает stepper, — 3 событий, к которым можно подключить вашу логику.
| Имя | Тип | Описание |
|---|---|---|
completed (hub-stepper) | EventEmitter<void> | Вызывается, когда пользователь отправляет последний шаг. |
nextStep (hub-stepper) | EventEmitter<number> | Вызывается при переходе к шагу, с индексом нового шага. |
previousStep (hub-stepper) | EventEmitter<number> | Вызывается при возврате к шагу, с индексом нового шага. |
Шаблоны
Шаблоны пока не задокументированы.