Алерт с заголовком и текстом

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

Подключение библиотеки SweetAlert

Прежде чем использовать SweetAlert, необходимо подключить её к проекту. Библиотека доступна через CDN, а также может быть установлена с помощью менеджера пакетов.

  1. Подключение через CDN:
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  1. Установка через npm:
npm install sweetalert2

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

Основы создания алерта

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

Пример базового алерта с заголовком и текстом:

Swal.fire({
  title: 'Успех',
  text: 'Операция выполнена успешно.',
  icon: 'success'
});

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

  • title — заголовок окна.
  • text — основной текст окна.
  • icon — иконка, которая отображается в окне. В данном случае используется иконка “успех”.

Важные параметры

Библиотека SweetAlert предоставляет множество параметров, которые можно использовать для кастомизации алертов. Рассмотрим несколько из них, которые важны при создании алертов с заголовком и текстом.

  • title — заголовок алерта. Это строка, которая будет отображена в верхней части окна.

  • text — текстовое описание. Этот параметр принимает строку и отображается под заголовком.

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

    • 'success' — зелёная галочка.
    • 'error' — красный крестик.
    • 'warning' — жёлтый восклицательный знак.
    • 'info' — голубая буква “i”.
    • 'question' — иконка вопроса.

  • footer — дополнительный текст или HTML, который будет отображён внизу окна.

  • showConfirmButton — логическое значение, определяющее, будет ли кнопка подтверждения отображаться в окне. По умолчанию она включена.

  • confirmButtonText — текст на кнопке подтверждения. По умолчанию это слово “ОК”.

Пример: алерт с дополнительным контентом

Если требуется добавить больше информации или элементы в окно, можно использовать такие параметры, как footer или html. В отличие от простого текста, который добавляется через параметр text, footer позволяет добавить HTML-контент в нижнюю часть окна.

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

Swal.fire({
  title: 'Ошибка',
  text: 'Не удалось сохранить данные.',
  icon: 'error',
  footer: '<a href="https://example.com">Почему это случилось?</a>'
});

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

Кастомизация кнопки

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

Пример с изменённым текстом на кнопке:

Swal.fire({
  title: 'Информация',
  text: 'Вы хотите продолжить?',
  icon: 'question',
  confirmButtonText: 'Да, продолжить'
});

Если нужно скрыть кнопку подтверждения, установите параметр showConfirmButton в значение false:

Swal.fire({
  title: 'Информация',
  text: 'Данные были загружены.',
  icon: 'info',
  showConfirmButton: false
});

Модификация стилей и анимаций

SweetAlert предоставляет возможности для стилизации окна и анимации. Например, можно настроить поведение окна при его открытии, а также задать длительность анимаций. Для этого используются параметры showClass и hideClass.

Пример с анимацией:

Swal.fire({
  title: 'Заголовок',
  text: 'Текст окна с анимацией.',
  icon: 'info',
  showClass: {
    popup: 'animate__animated animate__fadeIn'
  },
  hideClass: {
    popup: 'animate__animated animate__fadeOut'
  }
});

Здесь используются классы анимации из библиотеки Animate.css, которые обеспечивают эффект появления и исчезновения окна.

Пример полного окна с заголовком, текстом и кнопкой

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

Swal.fire({
  title: 'Подтверждение',
  text: 'Вы уверены, что хотите удалить этот файл?',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Да, удалить',
  cancelButtonText: 'Отмена',
  confirmButtonColor: '#d33',
  cancelButtonColor: '#3085d6',
  footer: 'Удаление нельзя отменить'
});

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

  • Параметр showCancelButton добавляет кнопку отмены.
  • Кнопки имеют свои текстовые значения, заданные через параметры confirmButtonText и cancelButtonText.
  • Цвета кнопок можно настроить через параметры confirmButtonColor и cancelButtonColor.
  • В нижней части окна добавлен футер с предупреждением.

Заключение

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

Оглавление