Stepper

Індикатор кроків майстра налаштувань — з прогресом, галочками і режимом кліків.

Stepper відрізняється від Tabs тим, що несе СТАН ПРОГРЕСУ: пройдені кроки позначені галочками, майбутні — приглушені, активний — виділений. Tabs нічого не говорить про порядок і не пам'ятає, де користувач був.

Приклад

Крок 2 з 3 — клікайте по кроках або ведіть станом.

Вертикальний і стан кроку

orientation="vertical" ставить кроки стовпчиком — для бокової панелі майстра і вузьких екранів. Поле status у кроці задає стан поверх позиції: error — на кроці є помилка (червоний індикатор, озвучується «помилка»), complete — крок пройдено навіть попереду поточного, для нелінійних майстрів.

Прогрес і режими кліків

У лінійному майстрі (visited і none) компонент пам'ятає найдальший крок, до якого дійшли: повернення назад не стирає галочки пройдених кроків, а в visited до них можна повернутися кліком. Щоб почати майстер спочатку, змініть :key компонента.

clickMode="none" рендерить кроки текстом, а не вимкненими кнопками: пройдений прогрес не виглядає «недоступним» і не озвучується так.

API

Props

Назва	Тип	Типово	Опис
`steps`*	`StepItem[]`	—	Кроки майстра.
`modelValue`	`number`	`0`	Поточний крок (0-based). Використовуйте через `v-model`.
`clickMode`	nonevisitedany	`"visited"`	Режим кліків. `any` — клік по будь-якому кроку; `visited` — лише по вже пройдених (і на крок вперед); `none` — клікати не можна, тільки Next/Back у споживача, і кроки рендеряться не кнопками, а текстом.
`orientation`	horizontalvertical	`"horizontal"`	Напрям. `vertical` ставить кроки стовпчиком — для бокової панелі майстра і вузьких екранів, де горизонтальний ряд переносився б.
`ariaLabel`	`string`	`"Кроки"`	Доступна назва навігації по кроках. Задавайте власну, якщо на сторінці кілька степперів: однакові орієнтири не розрізнити.
`compact`	`boolean`	`false`	Ховати заголовки — лишаються тільки кружечки-індикатори.

Події

Назва	Payload	Опис
`update:modelValue`	`[step: number]`	Активний крок (0-based). Використовуйте через `v-model`.
`change`	`[step: number]`	Активний крок змінився.

Слоти

Назва	Опис
`indicator`	Власний рендер індикатора кроку: число, галочка, іконка.
`label`	Власний рендер заголовка кроку.

Коли використовувати

Майстри налаштувань: онбординг, публікація за три кроки, візарди імпорту. Поряд — кнопки «Назад»/«Далі» споживача, які ведуть той самий v-model.

clickMode="visited" дозволяє повертатись по пройдених кроках, але не стрибати вперед — користувач не пропустить жодного кроку випадково.

Коли НЕ використовувати

Для перемикання вмісту без порядку — це Tabs: вкладки не псують прогрес, бо прогресу там немає.

Для кроків, які не можна пропускати, не задавайте clickMode="any".

Доступність

Кроки — список <ol>: скрінрідер повідомляє кількість і позицію кроку. aria-current="step" позначає активний крок; пройдені — галочка з контрастним текстом і прихований текст «завершено» (галочка заміщує номер, і без нього пройдений крок звучав рівно як майбутній), крок зі status: 'error' — «помилка». У compact назва кроку лишається для скрінрідера. Деактивовані кроки disabled і недоступні як вибір.

Кружечок кроку — 30px, тож на дотику кнопку добудовує невидима зона 45×45.

Горизонтальний ряд нижче sm показує підпис лише активного кроку, решта — кружечки й лінії (підписи лишаються для скрінрідера). Три кроки з підписами на 375px не вміщались і виїжджали за край: пункти ряду тягнуться з нульової основи й перенестися на новий рядок не можуть. Активний підпис обрізається трикрапкою. Задайте aria-label, якщо на сторінці кілька степперів.