Warning-сообщения

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

Структура warning-сообщений

Для создания warning-окна используется свойство icon в конфигурации SweetAlert. Значение этого свойства для предупреждающего сообщения устанавливается в строку 'warning'.

Пример базового warning-сообщения:

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

В этом примере задаются:

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

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

SweetAlert позволяет детально настроить внешний вид и поведение warning-сообщений с помощью различных параметров. Рассмотрим наиболее часто используемые:

  1. title и text Эти параметры позволяют задать текстовые элементы окна. title отображается крупным шрифтом в верхней части модального окна, а text — более мелким, под заголовком.

  2. showCancelButton Добавляет кнопку отмены, которая дает пользователю возможность отклонить действие. Это полезно в случаях, когда предупреждение связано с необратимыми действиями, например, удалением данных.

    Пример с кнопкой отмены:

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

  3. confirmButtonText и cancelButtonText Эти параметры задают текст для кнопок подтверждения и отмены соответственно. Это позволяет изменить стандартные надписи на кнопках, например, на более понятные или соответствующие контексту.

  4. reverseButtons По умолчанию кнопки подтверждения и отмены располагаются в следующем порядке: подтверждение слева, отмена справа. При установке reverseButtons: true, этот порядок меняется.

    Пример:

    Swal.fire({
  icon: 'warning',
  title: 'Вы хотите выйти?',
  showCancelButton: true,
  confirmButtonText: 'Выйти',
  cancelButtonText: 'Отмена',
  reverseButtons: true
})

  5. footer В SweetAlert 2.x добавлена возможность вставлять дополнительный контент внизу окна, используя параметр footer. Это может быть полезно для отображения дополнительной информации или ссылок, например, на политику конфиденциальности.

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

    Swal.fire({
  icon: 'warning',
  title: 'Удалить файл?',
  text: 'Вы уверены, что хотите удалить этот файл навсегда?',
  footer: '<a href="/terms">Условия удаления</a>'
})

Ожидание результата от пользователя

Для warning-сообщений часто требуется дождаться действия пользователя, прежде чем продолжить выполнение программы. Это можно реализовать с помощью методов, таких как then(), который позволяет обработать результаты взаимодействия с модальным окном. Результат будет содержать информацию о том, какую кнопку нажал пользователь.

Пример:

Swal.fire({
  icon: 'warning',
  title: 'Удалить элемент?',
  text: 'Вы уверены, что хотите удалить этот элемент?',
  showCancelButton: true,
  confirmButtonText: 'Удалить',
  cancelButtonText: 'Отмена'
}).then((result) => {
  if (result.isConfirmed) {
    // Логика удаления элемента
    console.log('Элемент удален');
  } else if (result.dismiss === Swal.DismissReason.cancel) {
    // Логика отмены действия
    console.log('Удаление отменено');
  }
})

В этом примере result.isConfirmed указывает, была ли нажата кнопка подтверждения, а result.dismiss указывает причину закрытия окна (например, нажатие кнопки отмены).

Динамическое изменение содержимого

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

Пример динамического текста:

const fileName = "report.pdf";
Swal.fire({
  icon: 'warning',
  title: `Вы уверены, что хотите удалить ${fileName}?`,
  text: 'Это действие невозможно отменить.'
});

В этом случае переменная fileName используется для динамического изменения текста в сообщении.

Визуальные настройки

SweetAlert предлагает различные способы улучшения визуального восприятия warning-сообщений:

  • Custom animations Можно добавить анимацию для окна предупреждения, чтобы оно появлялось или исчезало с определенным эффектом. Для этого используется параметр showClass и hideClass.

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

    Swal.fire({
  icon: 'warning',
  title: 'Будьте осторожны!',
  text: 'Это предупреждающее сообщение.',
  showClass: {
    popup: 'animated fadeInDown'
  },
  hideClass: {
    popup: 'animated fadeOutUp'
  }
})

  • Custom styling С помощью CSS можно дополнительно настроить стили модальных окон. Например, можно изменить цвет фона, шрифт или добавить другие визуальные эффекты.

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

    Swal.fire({
  icon: 'warning',
  title: 'Предупреждение',
  text: 'Пожалуйста, прочитайте это сообщение.',
  customClass: {
    popup: 'custom-popup-style'
  }
})

    Внешний CSS:

    .custom-popup-style {
  background-color: #fff3cd;
  color: #856404;
  border: 2px solid #ffeeba;
}

Использование warning-сообщений для подтверждения важных действий

Одной из самых частых ситуаций, где используется warning-сообщение, является подтверждение важных действий, таких как удаление данных, отправка необратимых запросов или другие критичные операции.

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

Swal.fire({
  icon: 'warning',
  title: 'Удалить аккаунт?',
  text: 'Это действие нельзя отменить. Вы уверены?',
  showCancelButton: true,
  confirmButtonText: 'Да, удалить',
  cancelButtonText: 'Отмена'
}).then((result) => {
  if (result.isConfirmed) {
    deleteAccount();  // Функция для удаления аккаунта
  }
})

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

Заключение

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

Оглавление