Переопределение стандартных стилей

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

Стандартные стили SweetAlert

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

  • Размеры окон и кнопок
  • Цвета фона, текста и кнопок
  • Анимации появления и исчезновения
  • Иконки и изображения

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

Переопределение стилей через CSS

Чтобы изменить внешний вид модальных окон SweetAlert, необходимо использовать собственный CSS, переопределяя классы, присвоенные элементам модального окна. Структура этих классов состоит из нескольких ключевых компонентов:

  1. Основное окно (swal2-container) — внешний контейнер для модального окна.
  2. Заголовок (swal2-title) — текст заголовка окна.
  3. Тело окна (swal2-html-container) — основная область с контентом.
  4. Кнопки (swal2-button) — кнопки для закрытия или подтверждения.

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

/* Переопределение фона контейнера */
.swal2-container {
  background-color: #f4f4f4;
}

/* Изменение стилей заголовка */
.swal2-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

/* Настройка стилей тела окна */
.swal2-html-container {
  font-size: 16px;
  color: #555;
  padding: 20px;
}

/* Кастомизация кнопок */
.swal2-button {
  background-color: #007bff;
  color: #fff;
  border-radius: 5px;
  padding: 10px 20px;
  border: none;
}

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

Изменение анимаций и эффектов

SweetAlert использует анимации для появления и исчезновения модальных окон. Эти анимации можно также кастомизировать, переопределяя стандартные стили для классов анимации, таких как swal2-show, swal2-hide, и swal2-noanimation.

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

/* Переопределение анимации появления */
.swal2-show {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

В этом примере создается эффект плавного появления окна с небольшим увеличением масштаба.

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

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

/* Кастомная иконка для окна успеха */
.swal2-icon.swal2-success {
  background-image: url('path/to/custom-success-icon.png');
  background-size: contain;
  background-repeat: no-repeat;
}

/* Кастомная иконка для окна ошибки */
.swal2-icon.swal2-error {
  background-image: url('path/to/custom-error-icon.png');
  background-size: contain;
  background-repeat: no-repeat;
}

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

Переопределение стилей через JavaScript

Кроме использования стандартного CSS, SweetAlert позволяет внедрять стили напрямую через JavaScript при вызове модальных окон. Это достигается с помощью опции customClass, которая позволяет указать пользовательские классы для различных элементов модального окна.

Пример использования customClass для добавления кастомных стилей:

Swal.fire({
  title: 'Успех',
  text: 'Данные успешно сохранены',
  icon: 'success',
  customClass: {
    container: 'my-custom-container',
    title: 'my-custom-title',
    content: 'my-custom-content',
    confirmButton: 'my-custom-button'
  }
});

Затем можно создать соответствующие стили в CSS:

.my-custom-container {
  background-color: #e0f7fa;
  border-radius: 10px;
}

.my-custom-title {
  color: #00796b;
}

.my-custom-content {
  font-size: 18px;
}

.my-custom-button {
  background-color: #00796b;
  color: #fff;
  border-radius: 5px;
}

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

Работа с темной темой

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

/* Стили для темной темы */
.swal2-dark .swal2-container {
  background-color: #333;
}

.swal2-dark .swal2-title {
  color: #fff;
}

.swal2-dark .swal2-button {
  background-color: #444;
  color: #fff;
}

.swal2-dark .swal2-button:hover {
  background-color: #666;
}

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

Применение глобальных стилей

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

/* Глобальные стили для всех модальных окон */
.swal2-container {
  max-width: 100%;
  width: 90%;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.swal2-button {
  font-size: 16px;
  padding: 12px 24px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.swal2-button:hover {
  background-color: #5cb85c;
}

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

Заключение

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

Оглавление