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:
Размер индикатора
Свойство items[n].indicatorSize задаёт диаметр индикатора шага в пикселях и перекрывает Steps.size. Значение одно для точки и для круга с числом или иконкой, от статуса шага не зависит. Типографика и отступы остаются от Steps.size. Если indicatorSize у шага не задан, шаг наследует Steps.size.
Кастомный рендер шага
Свойство renderItem заменяет текстовую часть шага (title и content). Коллбэк получает объект шага с вычисленным status и его индекс. Индикатор, линия и обработка клика остаются за компонентом, hasContent на результат renderItem не влияет.
Индивидуальный стиль шагу задаётся через items[n].className и items[n].style. Через style можно переопределить CSS-переменные компонента: в примере у активного шага изменены цвета индикатора и линии.
Разделитель после последнего шага
Свойство hasLastLine сохраняет разделительную линию после последнего шага. По умолчанию оно выключено. Работает в обеих ориентациях и при любом contentAlign. Если hasLine={false}, все разделители скрыты независимо от hasLastLine.
Кастомный размер шага
Каждому шагу можно задать индивидуальный размер через свойство height (вертикальный режим) или width (горизонтальный режим).
В вертикальном режиме последний шаг не требует явного height — он автоматически занимает минимально необходимое пространство (fit-content). Для остальных шагов height позволяет зарезервировать место под контент с переменной высотой (например, аккордеон).
- Vertical
- Horizontal
Вложенные шаги с аккордеоном
Шаг может содержать произвольный контент, в том числе другой компонент Steps. Для корректного отображения передайте height внешним шагам, которые содержат контент с переменной высотой.