Параметр cancelButtonColor

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

Синтаксис

Swal.fire({
  title: 'Заголовок',
  text: 'Текст уведомления',
  showCancelButton: true,
  cancelButtonColor: '#d33'
});

В примере выше задается параметр cancelButtonColor с значением #d33 (красный цвет). Это означает, что кнопка отмены будет отображаться в красном цвете. Важно, что этот параметр действует только при условии, что свойство showCancelButton установлено в true, так как без отображения кнопки отмены параметр будет игнорироваться.

Значения параметра

Значение параметра cancelButtonColor должно быть строкой, представляющей цвет в одном из следующих форматов:

  • HEX (например, #ff5733)
  • RGB (например, rgb(255, 87, 51))
  • RGBA (например, rgba(255, 87, 51, 0.5))
  • HSL (например, hsl(9, 100%, 60%))
  • CSS-название (например, red, blue, green)

Также можно использовать стандартные значения CSS для задания цвета, такие как transparent, inherit, initial и т.д.

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

Swal.fire({
  title: 'Удалить файл?',
  text: 'Вы уверены, что хотите удалить этот файл?',
  icon: 'warning',
  showCancelButton: true,
  cancelButtonText: 'Отменить',
  cancelButtonColor: 'rgb(255, 99, 71)'
});

В данном примере кнопка отмены будет окрашена в томатный цвет (RGB: 255, 99, 71). Это позволяет сделать интерфейс более выразительным и подчеркнуть функциональное отличие кнопки отмены от кнопки подтверждения.

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

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

Swal.fire({
  title: 'Выход из системы?',
  text: 'Вы уверены, что хотите выйти?',
  icon: 'info',
  showCancelButton: true,
  cancelButtonText: 'Нет',
  cancelButtonColor: 'rgba(255, 99, 71, 0.7)'
});

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

Влияние на доступность

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

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

Параметр cancelButtonColor работает в связке с другими свойствами модальных окон, такими как confirmButtonColor и showCancelButton. Это позволяет создавать более сложные и кастомизированные диалоговые окна. Например, можно задать разные цвета для кнопки подтверждения и отмены, а также настроить их расположение и видимость.

Swal.fire({
  title: 'Пожертвовать?',
  text: 'Хотите пожертвовать деньги?',
  icon: 'question',
  showCancelButton: true,
  cancelButtonText: 'Отмена',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Да, пожертвовать',
  confirmButtonColor: '#3085d6'
});

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

Поддержка темы

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

const isDarkMode = true; // или false в зависимости от настроек
Swal.fire({
  title: 'Параметры',
  text: 'Выберите предпочтения.',
  showCancelButton: true,
  cancelButtonColor: isDarkMode ? '#ff6347' : '#ff4500'
});

Здесь при включенной темной теме кнопка отмены будет красной, а при светлой — оранжевой.

Важные замечания

  • Параметр cancelButtonColor применим только при отображении кнопки отмены, которая активируется через параметр showCancelButton: true.
  • Если задан неправильный формат цвета, SweetAlert по умолчанию может использовать цвет кнопки по умолчанию.
  • Для обеспечения хорошей визуальной согласованности рекомендуется использовать гармоничные цвета для всех элементов интерфейса.
Оглавление