ProgressIndicator для многошаговых процессов

ProgressIndicator в Carbon Components Svelte представляет собой компонент, предназначенный для визуализации пошаговых процессов, часто используемых в формах, мастерах установки и любых интерфейсах, где пользователь проходит последовательность шагов. Он позволяет отображать текущий шаг, завершенные шаги и будущие шаги, обеспечивая ясную навигацию по процессу.

Основная структура компонента

Компонент ProgressIndicator в Svelte строится на двух ключевых элементах:

1. ProgressIndicator – контейнер для всех шагов.
2. ProgressStep – отдельный шаг внутри индикатора.

Пример базовой структуры:

Ключевые свойства:

• current – индекс активного шага (начинается с 0).
• vertical – логическое значение для отображения индикатора вертикально.
• complete и invalid – состояния шага, используемые внутри ProgressStep.

Управление состояниями шагов

Каждый ProgressStep может иметь несколько состояний:

• default – шаг еще не выполнен.
• current – текущий шаг, на котором находится пользователь.
• complete – завершенный шаг.
• incomplete – незавершенный шаг (необязательное, используется для визуального различия).
• error – шаг с ошибкой, визуально выделяется красным и может использоваться для валидации формы.

Пример использования состояний:

Вертикальный и горизонтальный режимы

Компонент поддерживает два основных режима отображения:

• Горизонтальный режим (по умолчанию) подходит для широкой панели и линейных процессов.
• Вертикальный режим активируется через свойство vertical={true}, используется для длинных последовательностей шагов или узких панелей интерфейса.

Пример вертикального режима:

Анимация и переходы

ProgressIndicator в Svelte поддерживает динамическое изменение шага через реактивное обновление переменной current. Изменение текущего шага автоматически обновляет визуальный статус всех шагов:

 currentStep = Math.min(currentStep + 1, 2)}>Следующий шаг
 currentStep = Math.max(currentStep - 1, 0)}>Предыдущий шаг

Это позволяет создавать плавные пошаговые интерфейсы, интегрированные с логикой приложения.

Кастомизация и стилизация

• label – текст заголовка шага.
• description – дополнительная информация для шага, отображается под заголовком.
• complete, invalid, disabled – классы для визуального обозначения статуса шага.
• slot – можно добавлять кастомные элементы внутрь шага, например, иконки, кнопки или подсказки.

Пример кастомного шага:

  ✔

Интеграция с формами и мастерами

ProgressIndicator идеально подходит для использования в комбинации с формами, где каждая страница или секция формы соответствует одному шагу. Для этого можно управлять currentStep через состояние приложения или Svelte store:

Это обеспечивает синхронизацию текущего шага с внутренним состоянием приложения, облегчая навигацию и валидацию.

Доступность и aria-атрибуты

Carbon Components Svelte реализует ARIA-поддержку, что делает ProgressIndicator доступным для пользователей с экранными читалками. Каждому шагу автоматически назначаются атрибуты aria-current, aria-label и aria-disabled, что повышает удобство использования для всех пользователей.