Простое подтверждение действия

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

Простейшее окно подтверждения

Для создания простого окна с подтверждением используется метод Swal.fire(). По умолчанию это окно представляет собой базовую модель с текстом и двумя кнопками: “Ок” и “Отмена”. Пример:

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

В данном примере:

  • title — заголовок окна, который сообщает пользователю о том, что требуется подтверждение.
  • text — дополнительный текст, объясняющий последствия действия.
  • icon — иконка, которая визуально помогает передать суть окна. В данном случае используется иконка предупреждения (warning).
  • showCancelButton — параметр, который добавляет кнопку отмены.
  • confirmButtonText и cancelButtonText — текст на кнопках подтверждения и отмены соответственно.

Когда пользователь выбирает один из вариантов, метод then() получает результат в виде объекта, где доступен флаг isConfirmed. Если пользователь подтвердил действие, этот флаг будет равен true, в противном случае — false.

Обработка подтверждения

Часто необходимо выполнить какое-то действие, например, удаление элемента или отправку данных, только если пользователь подтвердил своё намерение. В этом случае результат, полученный в обработчике then(), проверяется на наличие подтверждения. Пример:

Swal.fire({
  title: 'Удалить элемент?',
  text: 'Это действие необратимо!',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Да, удалить',
  cancelButtonText: 'Отмена'
}).then((result) => {
  if (result.isConfirmed) {
    // Удаление элемента
    deleteItem();
  } else {
    console.log('Удаление отменено');
  }
});

В этом примере после подтверждения пользователем будет вызвана функция deleteItem(), выполняющая удаление.

Пользовательский интерфейс и стилизация

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

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

В этом примере добавлена настройка цветов для кнопок. Кнопка подтверждения имеет синий цвет, а кнопка отмены — красный.

Ожидание перед подтверждением

SweetAlert позволяет настроить задержку перед подтверждением действия, что может быть полезно в случае, когда нужно, чтобы пользователь смог отменить своё решение. Для этого можно использовать параметр timer, который задаёт время в миллисекундах, после которого окно автоматически закроется. Пример:

Swal.fire({
  title: 'Вы уверены?',
  text: 'Через 5 секунд окно будет закрыто.',
  icon: 'info',
  timer: 5000, // Окно закроется через 5 секунд
  showCancelButton: true,
  confirmButtonText: 'Да, подтверждаю',
  cancelButtonText: 'Отмена'
}).then((result) => {
  if (result.isConfirmed) {
    console.log('Подтверждено');
  } else {
    console.log('Отменено');
  }
});

Здесь окно закроется автоматически через 5 секунд, но если пользователь успеет нажать одну из кнопок до истечения времени, результат будет обработан.

Заключение

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

Оглавление