Stepper
Індикатор кроків майстра налаштувань — з прогресом, галочками і режимом кліків.
Stepper відрізняється від Tabs тим, що несе СТАН ПРОГРЕСУ: пройдені кроки позначені галочками, майбутні — приглушені, активний — виділений. Tabs нічого не говорить про порядок і не пам'ятає, де користувач був.
Приклад
Крок 2 з 3 — клікайте по кроках або ведіть станом.
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
steps* | StepItem[] | — | Кроки майстра. |
modelValue | number | 0 | Поточний крок (0-based). Використовуйте через `v-model`. |
clickMode | nonevisitedany | "visited" | Режим кліків. `any` — клік по будь-якому кроку; `visited` — лише по вже пройдених (і на крок вперед); `none` — клікати не можна, тільки Next/Back у споживача. |
compact | boolean | false | Ховати заголовки — лишаються тільки кружечки-індикатори. |
Події
| Назва | Payload | Опис |
|---|---|---|
update:modelValue | [step: number] | Активний крок (0-based). Використовуйте через `v-model`. |
change | [step: number] | Активний крок змінився. |
Слоти
| Назва | Опис |
|---|---|
indicator | Власний рендер індикатора кроку: число, галочка, іконка. |
label | Власний рендер заголовка кроку. |
Коли використовувати
Майстри налаштувань: онбординг, публікація за три кроки, візарди
імпорту. Поряд — кнопки «Назад»/«Далі» споживача, які ведуть той самий
v-model.
clickMode="visited" дозволяє повертатись по пройдених кроках, але не
стрибати вперед — користувач не пропустить жодного кроку випадково.
Коли НЕ використовувати
Для перемикання вмісту без порядку — це Tabs: вкладки не псують прогрес, бо прогресу там немає.
Для кроків, які не можна пропускати, не задавайте clickMode="any".
Доступність
aria-current="step" позначає активний крок; пройдені — галочка з
контрастним текстом, а не лише зелена заливка. Деактивовані кроки
disabled і недоступні для скрінрідера як вибір.