Question-сообщения

Question-сообщения в SweetAlert

Библиотека SweetAlert предоставляет мощный и простой инструмент для создания красивых, настраиваемых всплывающих окон с сообщениями в браузере. Одним из типов сообщений, которые можно реализовать с помощью SweetAlert, является Question-сообщение. Этот тип окна используется, когда необходимо задать вопрос пользователю и ожидать его ответа.

Question-сообщения представляют собой всплывающее окно, которое обычно содержит вопрос, на который пользователь должен ответить, выбрав один из предложенных вариантов. Это может быть вопрос типа «Вы уверены?», «Хотите продолжить?» или любой другой, требующий подтверждения или отмены действия.

Основная структура Question-сообщения

В SweetAlert использование вопросительного окна осуществляется с помощью метода Swal.fire(). Чтобы создать типичное Question-сообщение, необходимо указать параметры, которые будут формировать вопрос и кнопки для выбора. Например:

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

Параметры для создания Question-сообщения

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

  2. text — Дополнительный текст, который может пояснять вопрос. В данном случае он может объяснить последствия действия, например, предупредить о необратимости.

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

  4. showCancelButton — Этот параметр задает отображение кнопки “Отмена”. Если установлено значение true, появляется кнопка для отмены действия (например, “Нет”). Если параметр равен false, пользователю будет доступна только кнопка для подтверждения.

  5. confirmButtonText — Текст кнопки, которая подтверждает действие. Например, это может быть “Да”, “Подтвердить” или любая другая надпись.

  6. cancelButtonText — Текст кнопки отмены действия. Этот параметр работает только в том случае, если showCancelButton равен true. Важно, чтобы текст был понятен и четко выражал намерение пользователя отменить действие.

Обработка ответа пользователя

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

В объекте результата будет несколько ключевых значений:

  • isConfirmed — если пользователь подтвердил действие, это значение будет равно true.
  • isDismissed — если пользователь закрыл окно или отменил действие, это значение будет равно true.

Пример с дополнительными действиями

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

Подтверждения без текста

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

Swal.fire({
  title: 'Вы уверены?',
  icon: 'question',
  showCancelButton: true,
  confirmButtonText: 'Да',
  cancelButtonText: 'Нет'
}).then((result) => {
  if (result.isConfirmed) {
    // Действие при подтверждении
  }
});

Использование различных иконок

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

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

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

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

Swal.fire({
  title: 'Вы хотите продолжить?',
  icon: 'question',
  showCancelButton: true,
  confirmButtonText: 'Да, продолжить',
  cancelButtonText: 'Отменить',
  customClass: {
    confirmButton: 'btn btn-success',
    cancelButton: 'btn btn-danger'
  }
});

Применение в реальных сценариях

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

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

window.onbeforeunl oad = function () {
  return Swal.fire({
    title: 'Вы уверены?',
    text: 'У вас есть несохраненные изменения. Вы хотите покинуть страницу?',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonText: 'Да, покинуть',
    cancelButtonText: 'Отмена'
  });
};

Итоги

Question-сообщения в SweetAlert предоставляют удобный способ взаимодействия с пользователем и получения от него быстрого ответа. Благодаря гибким настройкам можно легко настроить внешний вид, поведение и стиль вопроса. Такие окна полезны в различных ситуациях, включая подтверждения, предупреждения и простые вопросы, на которые требуется ответ от пользователя.

Оглавление