Steps
Быстрый старт
Ориентация
Свойство orientation задаёт направление шагов. В вертикальном режиме рекомендуется включать разделитель через hasLine.
- Horizontal
- Vertical
Внешний вид
- View
- ItemView
- CompletedItemView
Свойство view применяется ко всему компоненту и задаёт цвет завершённых шагов и разделителя. Принимает значения default и accent.
Свойство itemView применяется к индикатору и заголовку активного шага. Принимает значения default, negative, warning, positive.
Значения itemView применяются к шагу только когда его статус — active.
Свойство completedItemView задаётся на каждом шаге через items[n].completedItemView и переопределяет внешний вид завершённого шага. Принимает значения default, accent, negative, warning, positive.
Тип индикатора
Свойство indicator каждого шага определяет, что отображается в индикаторе:
- Numbered
- Bullet
- Icon
Если передать indicator: undefined, индикатор отображается в виде точки.
Свойство indicator принимает render-функцию, которая получает { status, size } и возвращает иконку.
Управление навигацией
Колбэк onChange вызывается при клике на шаг. Принимает (item, index, prevIndex). Внутри него обновляйте статусы шагов вручную.
Внешнее управление
Свойство current позволяет управлять активным шагом извне без использования onChange:
Кастомный размер шага
Каждому шагу можно задать индивидуальный размер через свойство height (вертикальный режим) или width (горизонтальный режим).
В вертикальном режиме последний шаг не требует явного height — он автоматически занимает минимально необходимое пространство (fit-content). Для остальных шагов height позволяет зарезервировать место под контент с переменной высотой (например, аккордеон).
- Vertical
- Horizontal
Вложенные шаги с аккордеоном
Шаг может содержать произвольный контент, в том числе другой компонент Steps. Для корректного отображения передайте height внешним шагам, которые содержат контент с переменной высотой.