Компонент Stepper для Angular | ng-hub-ui-stepper
Компонент stepper для Angular с валидацией, режимами ориентации, пользовательскими элементами управления, i18n и тематизацией через CSS-переменные.
Справочник API
Вот полный контракт stepper: всё, что можно привязать, прослушать, спроецировать и тематизировать, собрано в одном месте. Подключите то, что нужно, и оформите так, как хотите — это standalone и дружит с сигналами.
Входные свойства
Настройте stepper с помощью 6 входных свойств. Привязывайте их, как любой @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" последнего шага. |
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> | Вызывается при возврате к шагу, с индексом нового шага. |
Шаблоны
Шаблоны пока не задокументированы.
CSS-переменные
Тематизируйте каждый пиксель с помощью 14 CSS-переменных. Переопределите их в :root или ограничьте их областью обёртки.
Тема степпера
Токены темизации во время выполнения для поверхности, навигации и контролов stepper. Переопределяйте в `:root` или ограничивайте их областью обёртки.
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--hub-stepper-primary-color | #009ef7 | color | Основной акцент (активное состояние, прогресс). |
--hub-stepper-background-color | #f3f6f9 | color | Фон кнопки «Назад» / вторичной поверхности. |
--hub-stepper-text-color | #181c32 | color | Базовый цвет текста. |
--hub-stepper-border-color | #d8dde6 | color | Цвет рамки поверхности stepper. |
--hub-stepper-surface-color | #ffffff | color | Фон содержимого шага. |
--hub-stepper-nav-link-color | #495057 | color | Цвет метки шага навигации. |
--hub-stepper-nav-link-active-bg | #0d6efd | color | Фон индикатора активного шага. |
--hub-stepper-nav-link-active-color | #ffffff | color | Цвет текста индикатора активного шага. |
--hub-stepper-nav-link-disabled-color | #adb5bd | color | Цвет метки отключённого шага. |
--hub-stepper-gap | 1rem | length | Промежуток между регионами макета stepper. |
--hub-stepper-controls-gap | 0.5rem | length | Промежуток между контролами навигации. |
--hub-stepper-disabled-opacity | 0.5 | number | Непрозрачность, применяемая к отключённым шагам. |
--hub-stepper-sidebar-width | clamp(160px, 20vw, 240px) | length | Ширина sidebar в макете `sidebar`. |
--hub-stepper-animation-duration | 260ms | transition | Длительность перехода между шагами. |
Стилизация и тематизация
Примеры стилизации пока не задокументированы. В этом разделе будут рецепты кастомизации и примеры тематизации.