Параметр timerProgressBar

Библиотека SweetAlert предоставляет простые в использовании модальные окна для взаимодействия с пользователем. Один из важных элементов управления — это отображение прогресс-бара, который можно интегрировать с временными ограничениями. Параметр timerProgressBar служит для отображения прогресс-бара, связанного с таймером, в модальных окнах. Это позволяет улучшить визуализацию времени, оставшегося до закрытия окна или выполнения какого-либо действия.

Описание параметра

Параметр timerProgressBar используется в конфигурации модального окна SweetAlert для того, чтобы добавить динамический прогресс-бар, который будет заполняться по мере прохождения времени. Этот прогресс-бар появляется при использовании таймера для автоматического закрытия окна или выполнения определённого действия после заданной задержки. Основной его задачей является визуально продемонстрировать пользователю, сколько времени осталось до завершения таймера.

Параметр является булевым, и по умолчанию установлен в значение false, что означает, что прогресс-бар не будет отображаться. При установке значения true, прогресс-бар будет отображаться и обновляться в соответствии с таймером.

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

Swal.fire({
  title: 'Ожидание...',
  text: 'Это сообщение закроется через 3 секунды.',
  timer: 3000,
  timerProgressBar: true
});

В этом примере окно будет отображаться 3 секунды. Во время этого времени будет отображаться прогресс-бар, который будет заполняться, пока окно не закроется автоматически.

Как работает прогресс-бар

Когда параметр timerProgressBar установлен в true, SweetAlert добавляет к модальному окну графическое представление прогресса времени. Это осуществляется через внутренние вычисления, которые синхронизируются с параметром timer, определяющим общее время существования модального окна.

  1. Инициализация прогресса — Как только окно открывается, прогресс-бар начинает заполняться с нуля.
  2. Процесс заполнения — Прогресс-бар увеличивает свой уровень в зависимости от оставшегося времени. Чем меньше времени до закрытия окна, тем быстрее заполняется бар.
  3. Завершение — Когда время заканчивается, прогресс-бар заполняется полностью, и окно закрывается.

Такой прогресс-бар позволяет пользователю видеть, сколько времени осталось до выполнения действия, что улучшает взаимодействие и повышает информативность.

Взаимодействие с параметром timer

Параметр timer определяет, сколько времени будет отображаться модальное окно, а прогресс-бар визуализирует это время. Прогресс-бар обновляется синхронно с таймером, показывая точное количество времени, которое осталось до закрытия окна.

Swal.fire({
  title: 'Подождите!',
  text: 'Модальное окно автоматически закроется через 5 секунд.',
  timer: 5000,
  timerProgressBar: true
});

Здесь окно будет автоматически закрыто через 5 секунд, и прогресс-бар будет отображаться в течение всего этого времени.

События и взаимодействие с пользователем

Кроме визуализации прогресс-бара, параметр timerProgressBar взаимодействует с другими событиями, такими как таймер окончания (onClose), который может быть использован для выполнения какого-либо действия по завершении времени.

Пример с обработчиком события:

Swal.fire({
  title: 'Время на исходе!',
  text: 'Модальное окно закроется через 3 секунды.',
  timer: 3000,
  timerProgressBar: true,
  willClose: () => {
    console.log('Окно закрыто!');
  }
});

В этом случае после того как окно будет закрыто (по истечении времени таймера), будет выведено сообщение в консоль.

Комбинация с кнопками

Можно использовать timerProgressBar в сочетании с кнопками, чтобы предоставить пользователю возможность прервать автоматическое закрытие окна. Например, можно сделать так, чтобы окно автоматически закрывалось по таймеру, но с возможностью отмены пользователем.

Swal.fire({
  title: 'Пожалуйста, подождите...',
  text: 'Окно закроется через 10 секунд.',
  timer: 10000,
  timerProgressBar: true,
  showCancelButton: true,
  cancelButtonText: 'Отменить'
}).then((result) => {
  if (result.dismiss === Swal.DismissReason.cancel) {
    console.log('Окно было отменено пользователем');
  }
});

В этом примере окно закрывается через 10 секунд, но пользователю даётся возможность отменить это действие, если он нажмёт кнопку “Отменить”.

Важные моменты

  • Прогресс-бар будет отображаться только в случае использования параметра timer, так как его главная цель — визуализировать процесс отсчёта времени.
  • Параметр timerProgressBar является опциональным, и если он не установлен, прогресс-бар не будет отображаться.
  • Можно комбинировать прогресс-бар с кнопками, чтобы предоставить пользователю больше контроля над действием.

Использование timerProgressBar делает интерфейс более интерактивным, давая пользователю понять, сколько времени осталось до закрытия окна или выполнения какого-либо действия. Это добавляет удобства и улучшает взаимодействие с приложением.

Оглавление