Stepper

Компонент многошаговой формы для разбиения сложных процессов на управляемые шаги. Компонент управляет состоянием и предоставляет программный API для навигации.

Установка

npx @zizigy/capsule add Stepper

Использование

Базовый Stepper

Stepper предоставляет структуру и управление состоянием. Вам нужно будет добавить свои собственные визуальные стили для индикаторов шагов, линий и анимаций.

<capsule-stepper current-step="1">
  <capsule-stepper-steps>
    <capsule-stepper-step>Аккаунт</capsule-stepper-step>
    <capsule-stepper-step>Профиль</capsule-stepper-step>
    <capsule-stepper-step>Обзор</capsule-stepper-step>
  </capsule-stepper-steps>
  <capsule-stepper-panels>
    <capsule-stepper-panel>...</capsule-stepper-panel>
    <capsule-stepper-panel>...</capsule-stepper-panel>
    <capsule-stepper-panel>...</capsule-stepper-panel>
  </capsule-stepper-panels>
</capsule-stepper>

Навигация

const stepper = document.querySelector('capsule-stepper');

// Навигация программно
stepper.next(); // Перейти к следующему шагу
stepper.previous(); // Перейти к предыдущему шагу
stepper.setStep(3); // Перейти к конкретному шагу
stepper.first(); // Перейти к первому шагу
stepper.last(); // Перейти к последнему шагу
stepper.reset(); // Сбросить к первому шагу

Ориентация

<capsule-stepper
  current-step="1"
  orientation="vertical"
>
  ...
</capsule-stepper>

Анимация

<capsule-stepper-panels animation="x">
  <!-- Горизонтальная анимация слайда -->
</capsule-stepper-panels>

<capsule-stepper-panels animation="y">
  <!-- Вертикальная анимация слайда -->
</capsule-stepper-panels>

Компоненты

Компонент Stepper состоит из нескольких подкомпонентов:

capsule-stepper

Главный контейнер, управляющий текущим шагом и предоставляющий API навигации.

Атрибут	Тип	По умолчанию	Описание
current-step	number	1	Текущий активный шаг (начинается с 1)
orientation	string	-	Ориентация шагов (vertical, horizontal)

Значения orientation

• vertical — Шаги располагаются вертикально
• horizontal — Шаги располагаются горизонтально (по умолчанию)

capsule-stepper-steps

Контейнер для шагов. Атрибутов нет.

capsule-stepper-step

Одиночный индикатор шага.

Атрибут	Тип	Описание
status	string	Статус шага (active, completed, inactive)

Значения status

• active — Текущий активный шаг
• completed — Пройденный шаг
• inactive — Шаг еще не достигнут

capsule-stepper-panels

Контейнер для панелей.

Атрибут	Тип	По умолчанию	Описание
animation	string	-	Тип анимации (x, y, none)
orientation	string	-	Ориентация панелей (vertical, horizontal)

Значения animation

• x — Горизонтальная анимация слайда (по умолчанию для horizontal)
• y — Вертикальная анимация слайда (по умолчанию для vertical)
• none — Без анимации

Значения orientation

• vertical — Панели располагаются вертикально
• horizontal — Панели располагаются горизонтально

capsule-stepper-panel

Одиночная панель шага.

Атрибут	Тип	Описание
status	string	Статус панели (active, inactive)

Значения status

• active — Панель отображается
• inactive — Панель скрыта

Атрибуты

Все атрибуты описаны в разделе Компоненты выше. Дополнительные детали:

Значения атрибута status

Для capsule-stepper-step:

• active — Текущий активный шаг
• completed — Завершенный шаг
• inactive — Шаг, к которому еще не перешли

Для capsule-stepper-panel:

• active — Текущая видимая панель
• inactive — Скрытая панель

Значения атрибута animation

Для capsule-stepper-panels:

• x — Горизонтальная анимация слайда
• y — Вертикальная анимация слайда
• none — Без анимации

Значения атрибута orientation

Для capsule-stepper:

• vertical — Вертикальная компоновка

API Методы

Навигация

Метод	Возвращает	Описание
next()	boolean	Перейти к следующему шагу
previous()	boolean	Перейти к предыдущему шагу
setStep(n)	void	Перейти к конкретному шагу (начиная с 1)
first()	void	Перейти к первому шагу
last()	void	Перейти к последнему шагу
reset()	void	Сбросить к первому шагу

Проверка состояния

Метод	Возвращает	Описание
canGoNext()	boolean	Можно ли перейти к следующему шагу
canGoPrevious()	boolean	Можно ли перейти к предыдущему шагу

Свойства

Свойство	Возвращает	Описание
currentStep	number	Номер текущего шага (начиная с 1)
totalSteps	number	Общее количество шагов
status	object	Объект статуса с информацией о текущем шаге

События

change

Срабатывает при изменении текущего шага.

stepper.addEventListener('change', (e) => {
  console.log(e.detail); // { current, total, isFirst, isLast, progress }
});

Стилизация

Компонент предоставляет минимальный CSS только для компоновки. Вам нужно стилизовать:

• Индикаторы шагов: Круги, номера, иконки, галочки
• Соединительные линии: Линии между шагами
• Переходы панелей: Пользовательские анимации при необходимости
• Варианты состояний: Стили для активных, завершенных, неактивных состояний

Пример структуры CSS:

/* Ваши пользовательские стили */
capsule-stepper-step[status='active'] {
  color: blue;
}

capsule-stepper-step[status='completed'] {
  color: green;
}

capsule-stepper-step[status='inactive'] {
  color: gray;
}

Доступность

• ✅ Автоматические ARIA атрибуты для статуса шага
• ✅ Поддержка навигации с клавиатуры
• ✅ Управление фокусом
• ✅ Семантическая структура для screen readers