Компонент Stepper для Angular | ng-hub-ui-stepper
Компонент stepper для Angular с валидацией, режимами ориентации, пользовательскими элементами управления, i18n и тематизацией через CSS-переменные.
Справочник API
Вот полный контракт stepper: всё, что можно привязать, прослушать, спроецировать и тематизировать, собрано в одном месте. Подключите то, что нужно, и оформите так, как хотите — это standalone и дружит с сигналами.
Входные свойства
Настройте stepper с помощью 13 входных свойств. Привязывайте их, как любой @Input в Angular.
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
options (hub-stepper) | StepperOptions | {} | Объект конфигурации stepper: `layout` (`vertical` | `sidebar`) и `rtl` (boolean). |
variant (hub-stepper) | string | undefined | Семантический акцент для плашки активного шага и кнопок «далее» / «отправить». Встроенные значения: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `neutral`, `light`, `dark`; любая другая строка разрешается через `--hub-sys-color-<variant>`. |
backLabel (hub-stepper) | string | null | null | Переопределяет метку контрола "Back". При значении null используется встроенная метка i18n. |
continueLabel (hub-stepper) | string | null | null | Переопределяет метку контрола "Continue". |
submitLabel (hub-stepper) | string | null | null | Переопределяет метку контрола "Submit" последнего шага. |
truncateTitles (hub-stepper) | boolean | false | Обрезает заголовок каждого шага в рельсе до `--hub-stepper-nav-title-max-width` (по умолчанию `12rem`) и показывает полный текст во всплывающей подсказке при переполнении. |
railLabel (hub-stepper) | string | 'Steps' | Доступное имя tablist рельса шагов. |
nav (hub-stepper) | 'pills' | 'track' | 'pills' | Какую полосу рисует мастер. `pills` — та, что была всегда. `track` — линейный вариант: нумерованный маркер на шаг, галочка на шаге, который в порядке, и соединитель, берущий акцентный цвет на выходе из него. |
inOrderLabel (hub-stepper) | string | null | null | Что слышит экранный диктор на маркере с галочкой. Сама галочка декоративна, поэтому только это и говорит, что шаг в порядке. Без значения берётся встроенный словарь. |
beforeStepChange (hub-stepper) | StepperStepChangeGuard | null | null | Ворота, которые мастер спрашивает перед тем, как двинуться, чтобы форма успела сохранить. Выполняется, пока индекс ещё на месте, и возврат `false` — или промиса, разрешающегося в `false`, или отказа — оставляет мастер там, где он стоит. Выход так не может: когда он срабатывает, шаг уже сменился. |
title (hub-step) | string | undefined | Заголовок шага, отображаемый в навигации stepper. |
disabled (hub-step) | boolean | false | Отключает навигацию к этому шагу. |
valid (hub-step) | boolean | null | null | Вердикт мастера о данных именно этого шага. Три состояния, и третье важно: `true`, `false` или `null` — никто не высказался. Библиотека не заглядывает в форму: она записывает ответ, а полоса на нём рассуждает. |
События
Реагируйте на то, что делает stepper, — 3 событий, к которым можно подключить вашу логику.
| Имя | Тип | Описание |
|---|---|---|
completed (hub-stepper) | OutputEmitterRef<void> | Вызывается, когда пользователь отправляет последний шаг. |
nextStep (hub-stepper) | OutputEmitterRef<number> | Вызывается при переходе к шагу, с индексом нового шага. |
previousStep (hub-stepper) | OutputEmitterRef<number> | Вызывается при возврате к шагу, с индексом нового шага. |
Шаблоны
Сделайте его своим — 4 слотов шаблона позволяют проецировать собственную разметку.
| Имя | Описание | Пример |
|---|---|---|
stepperNav / hubStepperNav | Полностью заменяет стандартный рельс шагов. Контекст шаблона предоставляет steps (спроецированные экземпляры StepComponent) и currentIndex — привязывайте их через let-steps="steps" и 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 | Заменяет элемент управления, который рельс по умолчанию рисует внутри каждого пункта, сохраняя сам рельс: его список, role="tablist", ориентацию и подпись. Контекст отдаёт шаг как $implicit и как step, а также title, index, isCurrent, isCompleted и disabled; активация остаётся за вами — через ссылку на шаблон у хоста. Игнорируется, если задан шаблон 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 | Регистрирует десять встроенных словарей (en, es, ca, eu, gl, ast, an, de, zh и ar) и HubTranslationService, через который встроенные кнопки «Назад» / «Продолжить» / «Отправить» получают свой текст. Это замена StepperModule.forRoot(), удаляемого в 23.0.0. | providers: [provideHubStepper({ language: 'en', fallbackLanguage: 'en' })] |
STEPPER_DICTIONARIES | Встроенные словари в виде обычного объекта — экспортированы, чтобы регистрировать только нужные языки или объединять их с собственным словарём. Ключи плоские: BACK, CONTINUE и SUBMIT, именно их компонент ищет после промаха пространства HUBUI.STEPPER. | provideHubTranslation({ language: 'ca', dictionaries: { ca: { ...STEPPER_DICTIONARIES['ca'], ...myLabels } } }) |