Stepper

Горизонтальный

Вертикальный

С отключённым шагом

Входные параметры

Имя	Тип	По умолчанию	Описание
`items`	`StepperItem[]`	`[]`	Список шагов. Тип `StepperItem`: `label`, `description?`, `disabled?`.
`modelValue`	`number`	`0`	Текущий шаг (индекс, начиная с 0).
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Ориентация индикатора.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Размер шагов.

v-model

Проп modelValue связывается через v-model и представляет индекс текущего шага.

События

Имя	Аргументы	Когда срабатывает
`update:modelValue`	`step: number`	При переходе к шагу.
`change`	`step: number`	Аналогично `update:modelValue` — уведомление о смене шага.

Описание

Компонент C3Stepper — индикатор прогресса по шагам, управляемый через v-model индекса текущего шага. Прошлые шаги отмечаются галочкой, текущий подсвечивается, будущие остаются в нейтральном состоянии.

Используйте его для многошаговых процессов (регистрация, оформление заказа и т.п.) в горизонтальном или вертикальном виде. Шаги можно кликать для перехода.

Дополнительная информация

Компонент выводит упорядоченный список <ol> с aria-label="Шаги" и aria-orientation.
Активный шаг помечен aria-current="step".
Отключённые шаги (disabled) не эмитят событий и не могут быть выбраны.
Переход на уже текущий шаг не эмитит событий. Значение modelValue автоматически ограничивается допустимым диапазоном.