Простейший алерт

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

Установка SweetAlert

Для использования SweetAlert необходимо подключить её к проекту. Библиотека доступна через CDN или её можно установить через npm.

CDN:

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

Этот код нужно вставить в тег <head> HTML-документа.

npm:

Для установки через npm достаточно выполнить команду:

npm install sweetalert2

После установки можно импортировать библиотеку в JavaScript-файле:

import Swal from 'sweetalert2';

Простейший алерт

Для отображения простого окна с сообщением достаточно вызвать функцию Swal.fire(). По умолчанию она создаёт окно с текстом и кнопкой “ОК”, которая закрывает окно при нажатии.

Пример:

Swal.fire('Привет, мир!');

Этот код отобразит стандартное всплывающее окно с текстом “Привет, мир!” и кнопкой “OK”. Всё, что требуется для этого — вызвать функцию fire с нужным текстом в качестве параметра.

Дополнительные параметры

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

Пример с использованием дополнительных опций:

Swal.fire({
  title: 'Успех!',
  text: 'Ваши данные были успешно сохранены.',
  icon: 'success',
  confirmButtonText: 'Хорошо'
});

В этом примере окно будет содержать:

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

Рассмотрим каждый параметр:

  1. title — задаёт заголовок окна. Этот параметр является опциональным, и если его не указать, в окне не будет заголовка.
  2. text — основной текст. Его тоже можно не указывать, в этом случае в окне будет только заголовок.
  3. icon — определяет иконку окна. Библиотека позволяет выбрать один из предустановленных вариантов, таких как «успех», «ошибка», «предупреждение» и другие.
  4. confirmButtonText — позволяет изменить текст на кнопке, которая используется для закрытия окна.

Пример с кастомными стилями

Кроме стандартных настроек, SweetAlert поддерживает кастомизацию стилей. Например, можно изменить размеры кнопок или использовать собственный стиль для фона и текста. Это делается с помощью опции customClass.

Swal.fire({
  title: 'Что-то пошло не так!',
  text: 'Попробуйте ещё раз позже.',
  icon: 'error',
  confirmButtonText: 'Закрыть',
  customClass: {
    popup: 'my-popup',
    title: 'my-title',
    content: 'my-content',
    confirmButton: 'my-button'
  }
});

В данном примере добавлены кастомные классы для различных элементов окна. Эти классы можно использовать для дальнейшей настройки внешнего вида через CSS.

.my-popup {
  background-color: #f8d7da;
  border-color: #f5c6cb;
}
.my-title {
  color: #721c24;
}
.my-button {
  background-color: #721c24;
  color: white;
}

Пример с асинхронным поведением

Для более сложных сценариев можно использовать асинхронное поведение с функцией Swal.fire(). Например, можно дождаться, пока пользователь нажмёт кнопку, а затем выполнить какой-то код в зависимости от выбора.

Swal.fire({
  title: 'Вы уверены?',
  text: 'Вы не сможете вернуть эти изменения!',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Да, удалить',
  cancelButtonText: 'Отмена'
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire('Удалено!', 'Ваш файл был удалён.', 'success');
  } else {
    Swal.fire('Отменено', 'Ваш файл не был удалён.', 'info');
  }
});

В этом примере добавлены две кнопки: одна для подтверждения действия, а другая для отмены. Функция then() позволяет обработать результат действия пользователя. Если он нажмёт “Да, удалить”, отобразится окно с текстом “Удалено!”. Если он нажмёт “Отмена”, отобразится окно с текстом “Отменено”.

Вывод

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

Оглавление