Параметр cancelButtonText

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

Применение параметра

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

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

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

В этом примере кнопка “Отмена” будет иметь текст «Отмена». Однако параметр позволяет указать любой строковый текст, соответствующий ситуации.

Работа с параметром

Чтобы кнопка отмены появилась в окне, необходимо также использовать параметр showCancelButton, который указывает, должна ли кнопка отображаться. Без этого параметра кнопка отмены не будет видна, даже если задан текст для неё.

Swal.fire({
  title: 'Удалить файл?',
  text: 'Вы уверены, что хотите удалить этот файл?',
  icon: 'question',
  showCancelButton: true,
  cancelButtonText: 'Не удалять'
});

Здесь кнопка отмены будет иметь текст «Не удалять», что более понятно в контексте действия.

Стилизация кнопки отмены

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

Swal.fire({
  title: 'Сохранить изменения?',
  showCancelButton: true,
  cancelButtonText: 'Отказаться',
  customClass: {
    cancelButton: 'my-custom-cancel-button'
  }
});

В данном примере добавляется пользовательский класс my-custom-cancel-button, который можно стилизовать в CSS:

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

Зачем использовать cancelButtonText

  1. Контекст и понятность. Использование cancelButtonText помогает сделать интерфейс более понятным для пользователя. Вместо стандартного текста “Отмена” можно задать более конкретный текст, который будет соответствовать контексту действия, например, “Не сохранять”, “Отказаться”, “Не удалять” и т.д.

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

  3. Удобство в работе с действиями. В случае, если действие пользователя имеет серьёзные последствия, более детализированный текст кнопки позволяет избегать путаницы. Кнопка “Отказаться” в контексте удаления файла выглядит гораздо более очевидной, чем просто “Отмена”.

Взаимодействие с другими параметрами

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

Swal.fire({
  title: 'Подтверждение',
  text: 'Вы хотите сохранить изменения?',
  icon: 'question',
  showCancelButton: true,
  cancelButtonText: 'Не сохранять',
  confirmButtonText: 'Сохранить'
});

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

Ограничения

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

Заключение

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

Оглавление