Swal.fire()

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

Основная структура вызова

Метод Swal.fire() принимает объект с параметрами, которые определяют поведение модального окна. Пример базового вызова:

Swal.fire({
  title: 'Привет, мир!',
  text: 'Это стандартное уведомление.',
  icon: 'info'
});

В данном примере:

  • title: заголовок уведомления.
  • text: текст, отображаемый под заголовком.
  • icon: иконка уведомления, которая может быть одной из следующих: success, error, warning, info, question.

Параметры функции

В параметрах объекта, передаваемого в Swal.fire(), можно указать различные опции для настройки модального окна.

1. Заголовок и текст
  • title: строка, которая отображается как заголовок окна. Это обязательный параметр.
  • text: строка, которая отображается под заголовком. Может быть пустой или опциональной.
  • html: альтернативный параметр для вывода содержимого в формате HTML. Используется, если необходимо добавить теги HTML или выполнить кастомную разметку внутри модального окна.

Пример с HTML:

Swal.fire({
  title: 'Ошибка!',
  html: '<b>Внимание</b>: Что-то пошло не так.'
});
2. Иконка

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

    • success — иконка успеха.
    • error — иконка ошибки.
    • warning — иконка предупреждения.
    • info — иконка информации.
    • question — иконка вопроса.

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

Swal.fire({
  title: 'Успех!',
  text: 'Операция прошла успешно.',
  icon: 'success'
});
3. Кнопки
  • confirmButtonText: текст кнопки подтверждения.
  • cancelButtonText: текст кнопки отмены.
  • showCancelButton: булевое значение, указывающее, должна ли отображаться кнопка отмены.

Если showCancelButton установлен в true, то появляется дополнительная кнопка “Отмена”. Пример:

Swal.fire({
  title: 'Вы уверены?',
  text: 'Вы хотите продолжить?',
  icon: 'question',
  showCancelButton: true,
  confirmButtonText: 'Да',
  cancelButtonText: 'Нет'
});
4. Время авто-закрытия
  • timer: определяет время в миллисекундах, по истечении которого уведомление будет автоматически закрыто. Если не указан, окно не закроется автоматически.

Пример авто-закрытия через 3 секунды:

Swal.fire({
  title: 'Информация',
  text: 'Это уведомление закроется через 3 секунды.',
  icon: 'info',
  timer: 3000
});
5. Внешний вид и анимации

SweetAlert2 предоставляет возможность настроить внешний вид и анимацию модальных окон.

  • showClass и hideClass: задают анимацию появления и исчезновения. Можно передать объект с параметрами для анимации, например:
Swal.fire({
  title: 'Анимация!',
  text: 'Это окно с кастомной анимацией.',
  icon: 'info',
  showClass: { popup: 'swal2-zoom-in' },
  hideClass: { popup: 'swal2-zoom-out' }
});

  • position: параметр для настройки расположения окна на экране. Доступные значения:

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

Пример:

Swal.fire({
  title: 'Тестирование расположения',
  text: 'Окно появляется в верхней правой части экрана.',
  position: 'top-end',
  icon: 'info'
});
6. Функциональность после закрытия

Метод Swal.fire() позволяет задать функции, которые будут выполняться после закрытия модального окна.

  • didOpen: вызывается после того, как окно было открыто.
  • willClose: вызывается перед закрытием окна.

Пример с функцией после открытия:

Swal.fire({
  title: 'Окно открылось',
  text: 'После открытия окна, выполняется функция.',
  icon: 'info',
  didOpen: () => {
    console.log('Окно открылось!');
  }
});
7. Обработка результата

Swal.fire() возвращает объект с результатом, который можно использовать для обработки действий пользователя. Это позволяет узнать, был ли нажат “Ок” или “Отмена” и выполнить соответствующие действия.

Результат имеет форму объекта, в котором присутствуют следующие свойства:

  • isConfirmed: true, если нажата кнопка подтверждения.
  • isDismissed: true, если нажата кнопка отмены или закрыта кнопка по таймеру.
  • value: возвращаемое значение (например, текст с полей ввода).

Пример:

Swal.fire({
  title: 'Вы уверены?',
  text: 'Вы хотите выполнить это действие?',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Да',
  cancelButtonText: 'Нет'
}).then((result) => {
  if (result.isConfirmed) {
    console.log('Действие подтверждено');
  } else {
    console.log('Действие отменено');
  }
});

Расширенные возможности

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

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

  • text — текстовое поле.
  • email — поле для ввода email.
  • password — поле для ввода пароля.

Пример с текстовым полем:

Swal.fire({
  title: 'Введите ваше имя',
  input: 'text',
  inputPlaceholder: 'Имя'
}).then((result) => {
  if (result.value) {
    console.log('Введенное имя: ' + result.value);
  }
});

Итоги

Метод Swal.fire() — это мощный инструмент для создания модальных окон с множеством настроек и опций, который позволяет значительно улучшить взаимодействие с пользователем в веб-приложениях. Его гибкость и удобство делают его одним из самых популярных решений для отображения уведомлений и взаимодействия с пользователем.

Оглавление