Параметры миксина

Миксин Swal.mixin() в библиотеке SweetAlert предоставляет удобный способ для создания настраиваемых предупреждений, которые могут быть использованы многократно с различными параметрами. Это позволяет централизованно определять общие стили и поведение для всех всплывающих окон, а затем изменять их в зависимости от нужд конкретного предупреждения. Миксин возвращает функцию, которая будет создавать экземпляры Swal с заранее заданными параметрами.

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

Миксин SweetAlert строится на основе объекта, который передаётся как аргумент в Swal.mixin(). Этот объект может включать любые параметры, которые поддерживаются стандартным SweetAlert, а также дополнительные свойства для более сложной кастомизации.

Пример:

const myAlert = Swal.mixin({
  toast: true,
  position: 'top-end',
  showConfirmButton: false,
  timer: 3000
});

Этот миксин создаст всплывающее уведомление с параметрами:

  • toast: true — уведомление будет иметь формат “тост”.
  • position: 'top-end' — уведомление будет располагаться в верхнем правом углу.
  • showConfirmButton: false — скрывает кнопку подтверждения.
  • timer: 3000 — уведомление исчезнет через 3 секунды.

После создания миксина можно использовать его для отображения разных видов уведомлений с заранее установленными параметрами:

myAlert.fire({
  icon: 'success',
  title: 'Данные сохранены успешно'
});

Описание основных параметров миксина

  1. toast Устанавливает тип предупреждения. Если значение true, то предупреждение будет отображаться в виде “тостов” — небольших сообщений, которые исчезают через заданное время. По умолчанию это false, и предупреждение будет в виде модального окна.

  2. position Определяет местоположение всплывающего окна на экране. Это может быть:

    • 'top-start'
    • 'top-end'
    • 'center'
    • 'bottom-start'
    • 'bottom-end'

    Позиционирование важно для удобства восприятия и размещения предупреждений в зависимости от интерфейса.

  3. showConfirmButton Управляет видимостью кнопки подтверждения в диалоговом окне. Когда параметр установлен в false, окно будет автоматически закрываться через определённое время, а кнопку подтверждения можно убрать. В противном случае кнопка будет отображаться внизу окна.

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

  5. timerProgressBar Если установлено в true, будет отображаться прогресс-бар, который заполняется в зависимости от оставшегося времени до закрытия уведомления.

  6. title Заголовок предупреждения, который отображается в верхней части окна. Он может быть строкой или HTML-контентом. Это основной текст, который передаёт суть сообщения.

  7. text Описание предупреждения или дополнительный текст. Он может быть использован для более подробного объяснения сообщения или для вывода ошибок и предупреждений.

  8. icon Используется для отображения иконки в уведомлении. Возможные значения:

    • 'success'
    • 'error'
    • 'warning'
    • 'info'
    • 'question'

    Это помогает визуально различать типы сообщений и повышать их восприятие.

  9. customClass Позволяет задавать кастомные CSS-классы для различных частей уведомления. Это позволяет гибко кастомизировать внешний вид и добавить специфическую стилизацию.

  10. background Устанавливает фон окна. Этот параметр позволяет задать произвольный цвет фона для уведомления, что полезно при необходимости подчеркнуть важность сообщения или обеспечить соответствие дизайну.

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

Миксин можно настроить для создания стандартного уведомления об ошибке:

const errorAlert = Swal.mixin({
  icon: 'error',
  showConfirmButton: true,
  timer: 5000,
  background: '#f8d7da',
  customClass: {
    title: 'text-danger',
    popup: 'border-danger'
  }
});

errorAlert.fire({
  title: 'Ошибка!',
  text: 'Произошла непредвиденная ошибка при обработке данных.'
});

Здесь:

  • Иконка установлена на error, что означает отображение красного крестика.
  • Время работы окна — 5 секунд.
  • Фон уведомления задан красным оттенком.
  • Добавлены кастомные CSS-классы для стилизации заголовка и окна.

Расширенные параметры

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

  1. input Включает возможность ввода с помощью текстового поля, что полезно для запросов данных от пользователя, например, ввода имени или пароля.

    Пример:

    const inputAlert = Swal.mixin({
  input: 'text',
  inputPlaceholder: 'Введите ваше имя',
  showCancelButton: true,
  confirmButtonText: 'Отправить'
});

inputAlert.fire().then((result) => {
  if (result.isConfirmed) {
    console.log('Имя:', result.value);
  }
});

  2. footer Можно задать HTML-контент в нижней части окна, что полезно для добавления информации о товаре или дополнительного текста, который не должен быть частью основного сообщения.

    Пример:

    const customFooterAlert = Swal.mixin({
  footer: '<a href="#">Дополнительная информация</a>'
});

customFooterAlert.fire({
  title: 'Предупреждение!',
  text: 'Этот товар не может быть возвращен.',
});

Заключение

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

Оглавление