Параметр showCancelButton

Параметр showCancelButton библиотеки SweetAlert используется для отображения кнопки “Отмена” в диалоговых окнах. Этот параметр является частью объекта конфигурации, передаваемого при вызове функции Swal.fire(). Включение этой кнопки позволяет пользователю отменить действие, что может быть полезно в различных сценариях, таких как подтверждение удаления данных, отмена изменений или другие важные операции.

Основные особенности

  • Тип: Логический (true или false).
  • Назначение: Управляет видимостью кнопки “Отмена”.
  • Стандартное значение: false (кнопка не отображается по умолчанию).

Когда параметр установлен в true, в диалоговом окне появляется кнопка с надписью “Отмена”, которая позволяет пользователю отказаться от выполнения действия, подтвержденного другой кнопкой, например, “Ок” или “Удалить”.

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

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

В этом примере при вызове функции Swal.fire() будет отображаться окно с двумя кнопками: “Удалить” (подтверждение действия) и “Отмена” (отказ от действия). Параметр showCancelButton: true отвечает за то, чтобы кнопка “Отмена” появилась в окне.

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

Для полного управления внешним видом и поведением кнопок можно использовать другие параметры, такие как:

  • confirmButtonText — текст для кнопки подтверждения.
  • cancelButtonText — текст для кнопки отмены.
  • cancelButtonColor — настройка цвета кнопки отмены.
  • confirmButtonColor — настройка цвета кнопки подтверждения.

Таким образом, можно не только управлять видимостью кнопки “Отмена”, но и изменять внешний вид кнопок в зависимости от контекста.

Обработка результата

При использовании кнопки “Отмена” результат будет доступен в объекте ответа result, который возвращается после выполнения диалогового окна. Для того чтобы определить, была ли нажата кнопка “Отмена”, необходимо проверить свойство dismiss в объекте результата. Если оно равно "cancel", значит, пользователь отменил действие.

Пример обработки результата:

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 позволяет гибко настраивать интерфейс. С помощью таких свойств, как cancelButtonColor, можно менять внешний вид кнопки “Отмена”, добавляя в интерфейс дополнительные элементы для улучшения пользовательского опыта.

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

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

В данном примере кнопка “Отмена” будет красной, а кнопка “Удалить” — синей, что визуально подчеркивает разницу между действиями.

Использование в сложных сценариях

Параметр showCancelButton особенно полезен в сложных сценариях, где требуется предоставить пользователю возможность выбора. В таких случаях можно комбинировать его с различными параметрами, например, с input для получения данных от пользователя. Если для подтверждения действия важно, чтобы пользователь мог легко отменить его, кнопка “Отмена” добавляет большую гибкость в интерфейс.

Пример с вводом данных и кнопкой отмены:

Swal.fire({
  title: 'Введите ваш возраст',
  input: 'number',
  inputPlaceholder: 'Ваш возраст',
  showCancelButton: true,
  confirmButtonText: 'Отправить',
  cancelButtonText: 'Отмена'
}).then((result) => {
  if (result.isConfirmed) {
    console.log('Возраст:', result.value);
  } else if (result.dismiss === Swal.DismissReason.cancel) {
    console.log('Операция отменена');
  }
});

В этом примере пользователь может ввести данные, и при необходимости отменить ввод, нажав кнопку “Отмена”. Параметр showCancelButton в таком контексте предоставляет четкую логику отмены, улучшая пользовательский опыт.

Поддержка различных типов окон

Параметр showCancelButton совместим с разными типами окон, такими как предупреждения, ошибки, информационные сообщения и вопросы. Независимо от типа окна, кнопка “Отмена” может быть добавлена для отмены текущей операции.

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

Swal.fire({
  title: 'Информация',
  text: 'Вы хотите сохранить изменения?',
  icon: 'info',
  showCancelButton: true,
  confirmButtonText: 'Сохранить',
  cancelButtonText: 'Отмена'
});

Здесь параметр showCancelButton позволяет пользователю отменить действие, связанное с сохранением изменений.

Заключение

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

Оглавление