ProgressBar для отображения прогресса

ProgressBar — это компонент, предназначенный для визуального отображения прогресса выполнения задач или процессов. В библиотеке Carbon Components Svelte он реализован с полным соответствием стандартам IBM Carbon Design System, предоставляя гибкий и настраиваемый способ отображения статуса операций.

Импорт и базовое использование

Для использования компонента ProgressBar необходимо импортировать его из пакета carbon-components-svelte:
  • value — текущий прогресс в процентах или числовое значение.
  • max — максимальное значение шкалы прогресса.
  • label — текстовая метка, которая поясняет назначение прогресса.

Виды ProgressBar

Carbon Components Svelte поддерживает несколько типов прогресс-баров:

  1. Determinate — определённый прогресс с известным значением:
  1. Indeterminate — неопределённый прогресс, когда невозможно заранее вычислить завершение задачи:
  • indeterminate — булевый атрибут, который превращает ProgressBar в бесконечный анимационный индикатор.

Настройка цвета и размеров

ProgressBar позволяет изменять визуальный стиль с помощью свойств:

  • size — размер компонента, может принимать значения 'sm', 'md', 'lg'.
  • status — цветовое состояние прогресса: 'active', 'complete', 'error'.

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

  • 'active' — обычный прогресс, выполняющийся.
  • 'complete' — завершённый прогресс, визуально отображается как полностью заполненный.
  • 'error' — красный цвет, сигнализирующий о проблеме в процессе.

Анимация и обновление прогресса

В Svelte компонент ProgressBar легко обновляется динамически, используя реактивные переменные:
  • Прогресс обновляется автоматически при изменении переменной progress.
  • Использование tick() гарантирует правильное обновление DOM после каждого изменения значения.

Сложные сценарии

Несколько ProgressBar одновременно

Можно отображать несколько прогресс-баров, например, для параллельных задач:

Комбинация determinate и indeterminate

Для сложных процессов можно комбинировать разные типы:

Доступность

Компонент ProgressBar полностью поддерживает стандартные требования доступности:

  • role=“progressbar” автоматически добавляется в DOM.
  • aria-valuenow, aria-valuemin, aria-valuemax — атрибуты, соответствующие текущему значению, минимальному и максимальному значениям.
  • Текстовые метки доступны для экранных считывателей, обеспечивая информативность для пользователей с ограничениями.

Практические советы

  1. Выбор типа: если процесс имеет известное завершение — determinate, иначе — indeterminate.
  2. Использование статусов: status="error" полезен для визуальной индикации проблем.
  3. Динамическое обновление: применять реактивные переменные Svelte для изменения значения прогресса в реальном времени.
  4. Размеры и визуальный вес: крупные ProgressBar (lg) подходят для выделения важных процессов, а маленькие (sm) — для второстепенных задач.
Оглавление