Основные параметры конфигурации

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

title

Параметр title задает текст заголовка модального окна. Этот параметр может быть как строкой, так и функцией, которая возвращает строку. Если значение не задано, заголовок не будет отображаться.

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

Swal.fire({
  title: 'Добро пожаловать!',
  text: 'Это простое уведомление.'
});

text

Параметр text используется для отображения основного текста в теле модального окна. Этот параметр также может быть строкой или функцией. Обычно используется для дополнительной информации, поясняющей действие, которое требуется выполнить.

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

Swal.fire({
  title: 'Ошибка',
  text: 'Что-то пошло не так, попробуйте снова.'
});

icon

Параметр icon управляет иконкой, которая отображается в модальном окне. В библиотеке предусмотрены следующие стандартные иконки:

  • "success" — зеленая галочка, указывает на успешное выполнение действия.
  • "error" — красный крест, указывает на ошибку.
  • "warning" — желтый треугольник с восклицательным знаком, указывает на предупреждение.
  • "info" — синий кружок с буквой “i”, используется для информационных сообщений.
  • "question" — иконка вопросительного знака, используется для запросов.

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

Swal.fire({
  title: 'Вы уверены?',
  icon: 'question',
  text: 'Это действие не может быть отменено.'
});

showConfirmButton

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

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

Swal.fire({
  title: 'Подтверждение',
  text: 'Вы хотите продолжить?',
  showConfirmButton: false
});

showCancelButton

Параметр showCancelButton задает видимость кнопки отмены. Если он установлен в true, появляется дополнительная кнопка для отмены действия.

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

Swal.fire({
  title: 'Отменить действие?',
  text: 'Вы уверены, что хотите отменить?',
  showCancelButton: true
});

confirmButtonText и cancelButtonText

Эти параметры позволяют задавать текст на кнопках подтверждения и отмены. Если не заданы, будут использованы стандартные тексты: “OK” для кнопки подтверждения и “Отмена” для кнопки отмены.

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

Swal.fire({
  title: 'Удалить файл?',
  text: 'Вы уверены, что хотите удалить этот файл?',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Удалить',
  cancelButtonText: 'Отмена'
});

timer

Параметр timer задает время в миллисекундах, через которое модальное окно будет автоматически закрыто. Если задано, то кнопки подтверждения и отмены будут неактивны до закрытия окна. Параметр можно использовать для создания всплывающих уведомлений или для автоматического закрытия окна.

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

Swal.fire({
  title: 'Уведомление',
  text: 'Это сообщение исчезнет через 3 секунды.',
  timer: 3000
});

toast

Параметр toast позволяет создавать всплывающие уведомления, которые автоматически исчезают после определенного времени. Включение этого параметра изменяет поведение модального окна, превращая его в всплывающее уведомление.

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

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

position

Параметр position задает положение модального окна на экране. Можно выбрать из следующих позиций:

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

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

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

customClass

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

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

Swal.fire({
  title: 'Настроенное окно',
  text: 'Это окно имеет кастомное оформление.',
  icon: 'info',
  customClass: {
    popup: 'my-popup-class',
    title: 'my-title-class',
    text: 'my-text-class',
    confirmButton: 'my-confirm-button'
  }
});

allowOutsideClick

Параметр allowOutsideClick позволяет управлять поведением модального окна при клике вне его. Если значение установлено в true, окно будет закрываться при клике на фон. Если значение установлено в false, окно не будет закрываться при клике вне его.

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

Swal.fire({
  title: 'Уведомление',
  text: 'Это окно нельзя закрыть кликом по фону.',
  allowOutsideClick: false
});

allowEscapeKey

Параметр allowEscapeKey управляет возможностью закрыть окно с помощью клавиши “Esc”. Если значение установлено в false, окно нельзя будет закрыть нажатием этой клавиши.

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

Swal.fire({
  title: 'Внимание!',
  text: 'Это окно нельзя закрыть клавишей Escape.',
  allowEscapeKey: false
});

onBeforeOpen и onAfterClose

Параметры onBeforeOpen и onAfterClose позволяют привязать функции, которые будут вызываться до открытия окна и после его закрытия соответственно. Эти колбэк-функции могут быть полезны для выполнения анимаций или других действий до и после отображения модального окна.

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

Swal.fire({
  title: 'Загрузка...',
  text: 'Подождите, пока загружается контент.',
  onBeforeOpen: () => {
    console.log('Окно собирается открыться');
  },
  onAfterClose: () => {
    console.log('Окно было закрыто');
  }
});

didOpen и willClose

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

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

Swal.fire({
  title: 'Пример с анимацией',
  text: 'Это пример с использованием событий жизненного цикла.',
  didOpen: () => {
    console.log('Окно открылось');
  },
  willClose: () => {
    console.log('Окно будет закрыто');
  }
});

input

Параметр input позволяет создать окно с полем ввода. Это может быть текстовое поле, которое позволяет пользователю ввести данные перед тем, как подтвердить или отменить действие. Типы ввода могут быть различными: текст, email, телефон и другие.

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

Swal.fire({
  title: 'Введите ваш email',
  input: 'email',
  inputLabel: 'Ваш email',
  inputPlaceholder: 'Введите ваш email адрес'
});

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

Оглавление