Изменение цвета кнопок

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

Основные параметры для настройки цвета кнопок

SweetAlert предлагает несколько встроенных параметров для настройки внешнего вида кнопок. Среди них выделяются два основных:

  • buttons: объект, позволяющий настроить кнопки внутри окна.
  • customClass: позволяет применить кастомные классы для кнопок, что даёт возможность ещё более гибко настроить их стиль.

Изменение стандартных цветов кнопок

Для изменения цветов кнопок, достаточно использовать параметр buttons. Это позволяет изменить стандартные настройки кнопок, такие как их текст и внешний вид. В объекте можно указать цвета для разных состояний кнопок — обычное состояние, наведённое состояние и состояние при клике.

Пример изменения цвета кнопки на зеленый:

Swal.fire({
  title: 'Успех!',
  text: 'Операция выполнена успешно.',
  icon: 'success',
  buttons: {
    confirm: {
      text: 'ОК',
      value: true,
      className: 'swal-button--green', // применение класса
    }
  }
});

В данном примере кнопка «ОК» будет иметь зелёный цвет. Но для того, чтобы этот стиль работал, нужно добавить соответствующий CSS-класс.

Применение кастомных классов через customClass

Для более гибкой настройки внешнего вида кнопок можно использовать параметр customClass. Этот параметр позволяет назначить определённые CSS-классы для различных частей всплывающего окна, включая кнопки.

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

Swal.fire({
  title: 'Ошибка!',
  text: 'Что-то пошло не так.',
  icon: 'error',
  customClass: {
    confirmButton: 'custom-confirm-button'
  }
});

После добавления этого кода, необходимо прописать стиль для класса custom-confirm-button в CSS:

.custom-confirm-button {
  background-color: #ff0000;
  border: none;
  color: #fff;
}

Такой подход позволяет использовать CSS-переменные, медиа-запросы и другие стили для более сложной настройки.

Использование нескольких кнопок с разными цветами

SweetAlert также позволяет создавать окна с несколькими кнопками, каждая из которых может иметь свой цвет и стиль. Для этого нужно указать объект с настройками для каждой кнопки в параметре buttons.

Пример окна с двумя кнопками, одна из которых будет красной, а другая — синей:

Swal.fire({
  title: 'Выберите действие',
  text: 'Что вы хотите сделать?',
  icon: 'question',
  showCancelButton: true,
  confirmButtonText: 'Продолжить',
  cancelButtonText: 'Отмена',
  customClass: {
    confirmButton: 'confirm-btn',
    cancelButton: 'cancel-btn'
  }
});

И соответствующие CSS-стили:

.confirm-btn {
  background-color: #007bff;
  border: none;
  color: white;
}

.cancel-btn {
  background-color: #dc3545;
  border: none;
  color: white;
}

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

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

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

Пример:

:root {
  --button-color: #007bff;
}

.swal-button {
  background-color: var(--button-color);
}

Теперь можно динамически менять значение переменной, изменяя цвет кнопок в зависимости от внешних факторов:

document.documentElement.style.setProperty('--button-color', '#28a745');

Этот подход значительно облегчает поддержку и изменения в проекте, так как все цвета кнопок можно централизованно менять через одну переменную.

Состояния кнопок

SweetAlert позволяет изменять кнопки не только по умолчанию, но и их поведение при наведении курсора или при нажатии. Для этого можно использовать псевдоклассы CSS: :hover, :active и :focus.

Пример изменения цвета кнопки при наведении:

.swal-button:hover {
  background-color: #0056b3;
}

.swal-button:active {
  background-color: #003366;
}

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

Работа с темами

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

Пример окна с успешным сообщением:

Swal.fire({
  title: 'Успех!',
  text: 'Ваша операция прошла успешно!',
  icon: 'success',
  confirmButtonText: 'Отлично',
  customClass: {
    confirmButton: 'btn-success'
  }
});

И соответствующий CSS:

.btn-success {
  background-color: #28a745;
  color: white;
}

Для окна с ошибкой:

Swal.fire({
  title: 'Ошибка!',
  text: 'Что-то пошло не так.',
  icon: 'error',
  confirmButtonText: 'Попробовать снова',
  customClass: {
    confirmButton: 'btn-error'
  }
});

CSS-стили для кнопки с ошибкой:

.btn-error {
  background-color: #dc3545;
  color: white;
}

Такой подход помогает улучшить восприятие информации пользователем, так как цвет кнопки соответствует контексту окна.

Резюме

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

Оглавление