Кнопка отмены

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

Основы использования кнопки отмены

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

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

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

В этом примере используется параметр showCancelButton: true для отображения кнопки отмены. При этом параметр cancelButtonText задает текст на кнопке, который можно настроить в зависимости от нужд интерфейса. После того как пользователь взаимодействует с диалоговым окном, результат обработки сохраняется в объекте result, где можно проверить, была ли нажата кнопка отмены (result.dismiss === Swal.DismissReason.cancel).

Визуальная кастомизация кнопки отмены

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

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

Swal.fire({
  title: 'Вы уверены?',
  text: 'Это действие невозможно отменить!',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Удалить',
  cancelButtonText: 'Отмена',
  customClass: {
    cancelButton: 'cancel-btn-custom'
  }
});

В этом примере используется параметр customClass, с помощью которого можно применить класс CSS к кнопке отмены. Этот класс можно определить в стилях, чтобы задать ей уникальные стили:

.cancel-btn-custom {
  background-color: #f44336;
  color: white;
  border-radius: 5px;
}

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

Логика работы с кнопкой отмены

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

Пример с дополнительной логикой:

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

В данном примере, помимо отображения окна с кнопками “Да” и “Отмена”, добавлены функции saveChanges() и revertChanges(), которые вызываются в зависимости от того, была ли нажата кнопка подтверждения или отмены. Это позволяет гибко настроить поведение в зависимости от выбора пользователя.

Совмещение с другими параметрами SweetAlert

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

Пример с таймером:

Swal.fire({
  title: 'Подтвердите действие',
  text: 'Если вы не нажмете кнопку в течение 5 секунд, действие будет отменено.',
  icon: 'info',
  showCancelButton: true,
  confirmButtonText: 'Продолжить',
  cancelButtonText: 'Отмена',
  timer: 5000,
  timerProgressBar: true
}).then((result) => {
  if (result.isConfirmed) {
    // Код при подтверждении действия
    proceedWithAction();
  } else if (result.dismiss === Swal.DismissReason.cancel) {
    // Код при отмене действия
    cancelAction();
  }
});

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

Использование с пользовательскими обработчиками

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

Пример с обработчиком:

Swal.fire({
  title: 'Удалить файл?',
  text: 'Эту операцию нельзя отменить.',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Удалить',
  cancelButtonText: 'Отмена'
}).then((result) => {
  if (result.isConfirmed) {
    deleteFile();
  }
}).catch((error) => {
  console.log('Произошла ошибка:', error);
});

Здесь используется .catch() для перехвата возможных ошибок, что помогает избежать сбоев в приложении, особенно в ситуациях, когда логика удаления или отмены может зависеть от внешних факторов, таких как сеть или сервер.

Заключение

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