Тосты и уведомления

SweetAlert предоставляет мощные возможности для отображения модальных окон и уведомлений в браузере. Однако помимо стандартных модальных окон, библиотека также позволяет работать с тостами — короткими уведомлениями, которые отображаются на экране и исчезают через несколько секунд. Тосты используются для того, чтобы информировать пользователя о событиях, не требуя его немедленного действия.

Основы работы с тостами

Для создания тостов в SweetAlert используется метод Swal.fire(). Однако чтобы уведомление было выполнено в стиле тоста, необходимо использовать дополнительные параметры для настройки внешнего вида и поведения уведомления.

Swal.fire({
  position: 'top-end',
  icon: 'success',
  title: 'Ваши данные успешно сохранены!',
  showConfirmButton: false,
  timer: 1500
});

В этом примере:

  • position — определяет, где будет располагаться тост на экране. Возможные значения: top-start, top-end, top, center, bottom-start, bottom-end, bottom.
  • icon — тип иконки, которая будет отображена в уведомлении. В примере используется иконка успеха (success), но доступны также иконки для ошибок (error), предупреждений (warning), информации (info), и дефолтная иконка (question).
  • title — текст, который будет отображён в тосте.
  • showConfirmButton — параметр, который отключает отображение кнопки подтверждения.
  • timer — время в миллисекундах, через которое тост исчезнет с экрана. В данном случае 1500 миллисекунд (или 1.5 секунды).

Позиционирование тостов

Одним из ключевых аспектов при использовании тостов является их позиционирование. SweetAlert позволяет легко настроить, где именно на экране будет отображаться уведомление.

Параметр position управляет этим, и существует несколько вариантов:

  • top-start — верхний левый угол
  • top-end — верхний правый угол
  • top — по центру в верхней части экрана
  • center — по центру экрана
  • bottom-start — нижний левый угол
  • bottom-end — нижний правый угол
  • bottom — по центру в нижней части экрана

Пример:

Swal.fire({
  position: 'bottom-start',
  icon: 'info',
  title: 'Пожалуйста, подождите...',
  showConfirmButton: false,
  timer: 2000
});

Этот код отобразит тост с информацией в нижнем левом углу экрана, который исчезнет через 2 секунды.

Настройка внешнего вида

Для того чтобы тосты выглядели более гармонично с остальной частью интерфейса, SweetAlert позволяет настроить внешний вид уведомлений. Например, можно изменить цвет фона, добавить собственные стили и даже настроить анимацию появления и исчезновения.

Одним из методов настройки является использование параметра customClass, который позволяет задать кастомные классы для различных частей уведомления:

Swal.fire({
  position: 'center',
  icon: 'success',
  title: 'Данные успешно отправлены!',
  showConfirmButton: false,
  timer: 2000,
  customClass: {
    popup: 'my-popup-class',
    title: 'my-title-class'
  }
});

В данном примере для всплывающего окна и заголовка заданы классы my-popup-class и my-title-class. Это позволяет применять собственные стили CSS для изменения внешнего вида тоста.

Применение различных типов тостов

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

Пример тоста с предупреждением:

Swal.fire({
  position: 'top-end',
  icon: 'warning',
  title: 'Ваши изменения не были сохранены!',
  showConfirmButton: false,
  timer: 2000
});

В этом примере тост будет отображать предупреждение, информируя пользователя о несохранённых данных. Позиция тоста — верхний правый угол, и он исчезнет через 2 секунды.

Анимация появления и исчезновения

SweetAlert предоставляет возможность настроить анимацию тостов. Это позволяет сделать уведомления ещё более выразительными. Включение анимации выполняется через параметр toast:

Swal.fire({
  toast: true,
  position: 'top-end',
  icon: 'success',
  title: 'Операция выполнена успешно',
  showConfirmButton: false,
  timer: 2000,
  timerProgressBar: true
});

Параметр toast: true активирует режим тоста. Включение timerProgressBar: true добавляет прогресс-бар, который отображает оставшееся время до исчезновения тоста. Также стоит отметить, что в таком случае тост исчезает плавно с анимацией.

Использование событий

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

Swal.fire({
  toast: true,
  position: 'top-end',
  icon: 'info',
  title: 'Ваш заказ оформлен!',
  showConfirmButton: false,
  timer: 2000,
  onClose: () => {
    console.log('Тост исчез');
  }
});

В этом примере, как только тост исчезает, срабатывает функция onClose, которая выводит в консоль сообщение.

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

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

Swal.fire({
  toast: true,
  position: 'bottom-center',
  icon: 'success',
  title: 'Файл успешно загружен!',
  showConfirmButton: false,
  timer: 3000,
  timerProgressBar: true,
  customClass: {
    popup: 'my-toast-class',
    title: 'my-toast-title-class'
  },
  didOpen: () => {
    const toast = Swal.getToast();
    toast.style.backgroundColor = '#4BB543'; // Изменение фона тоста
  }
});

В этом примере используется много различных опций, включая стилизацию и анимацию. Тост будет отображён в нижней части экрана по центру, и фон будет изменён программно.

Советы по использованию тостов

  • Не злоупотребляйте количеством тостов: Частое появление уведомлений на экране может раздражать пользователей. Рекомендуется использовать их только для кратких и важных сообщений.
  • Используйте соответствующие иконки: Иконки помогают пользователю быстро понять тип уведомления. Например, иконка ошибки для сообщений об ошибках, иконка успеха для успешных операций.
  • Настройка таймера: Для большинства тостов рекомендуется устанавливать таймер, чтобы уведомление исчезало автоматически. Это позволяет не перегружать интерфейс.

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

Оглавление