Работа с CSS-классами

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

Применение встроенных CSS-классов

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

  • .swal2-popup — основной контейнер окна.
  • .swal2-title — заголовок окна.
  • .swal2-content — тело окна, где отображается текст или форма.
  • .swal2-footer — футер, который может содержать кнопки или другую информацию.
  • .swal2-confirm и .swal2-cancel — кнопки подтверждения и отмены.

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

.swal2-popup {
    background-color: #f0f0f0;
}

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

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

Swal.fire({
  title: 'Пример',
  text: 'Кастомизация через CSS-классы',
  customClass: {
    popup: 'my-popup',
    title: 'my-title',
    content: 'my-content',
    confirmButton: 'my-confirm-button',
    cancelButton: 'my-cancel-button'
  }
});

В этом примере создаются пользовательские классы для каждого компонента окна. В результате можно применить к ним индивидуальные стили:

.my-popup {
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.my-title {
    color: #333;
    font-size: 1.5rem;
}

.my-content {
    font-size: 1rem;
    color: #666;
}

.my-confirm-button {
    background-color: #4caf50;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
}

.my-cancel-button {
    background-color: #f44336;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
}

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

Расширенные возможности с CSS-переходами и анимациями

SweetAlert позволяет добавлять анимации и переходы, используя CSS. В стандартной конфигурации окна уже содержат базовые анимации появления и исчезновения, но для достижения уникального эффекта можно создать свои собственные анимации с использованием ключевых кадров (keyframes).

Пример создания анимации появления окна с плавным увеличением:

@keyframes popup-appear {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.swal2-popup {
    animation: popup-appear 0.5s ease-in-out;
}

В данном примере создается анимация popup-appear, которая плавно увеличивает окно с момента появления, начиная с масштаба 0.5 и заканчивая 1. Это добавляет дополнительную динамику и визуальную привлекательность.

Управление анимациями кнопок

SweetAlert автоматически анимирует кнопки подтверждения и отмены, однако можно добавить кастомные анимации для этих элементов. Используя @keyframes или CSS-переходы, можно задать, например, эффект изменения цвета или движения при наведении курсора.

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

.my-confirm-button:hover {
    animation: button-hover 0.3s ease-out;
}

@keyframes button-hover {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

Этот код создает эффект «пульсации» кнопки, когда пользователь наводит на неё курсор. Такое поведение привлекает внимание и делает взаимодействие с элементами более интуитивно понятным.

Изменение стилей с помощью классов по умолчанию

Библиотека SweetAlert имеет несколько встроенных стилей для различных типов окон, таких как ошибки, предупреждения, успехи и т. д. Эти стили также могут быть изменены с помощью CSS-классов. Например, для успешных уведомлений используется класс .swal2-success, а для ошибок — .swal2-error.

Можно легко изменить стиль окна, например, для уведомлений об успехе:

.swal2-success {
    background-color: #28a745;
    border: 2px solid #155724;
}

.swal2-success .swal2-title {
    color: white;
}

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

Применение стилей для различных состояний окна

SweetAlert поддерживает динамическую стилизацию в зависимости от состояния окна. Например, при закрытии окна или изменении его содержимого, можно изменять стиль элементов. Для этого можно использовать такие CSS-селекторы, как .swal2-shown, .swal2-close или .swal2-loading.

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

.swal2-loading {
    background-color: rgba(0, 0, 0, 0.5);
}

.swal2-close {
    background-color: #ff6347;
    border-radius: 50%;
    padding: 10px;
}

Здесь .swal2-loading добавляет полупрозрачный черный фон к окну, когда оно находится в процессе загрузки, а .swal2-close стилизует кнопку закрытия окна.

Интеграция с существующими стилями

Для того чтобы SweetAlert лучше вписывался в общий стиль приложения, можно использовать препроцессоры CSS, такие как SASS или LESS. Это позволяет создавать более сложные и гибкие стили, а также использовать переменные для управления цветами, размерами и другими параметрами стилей.

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

$swal-background-color: #f8f9fa;

.my-popup {
    background-color: $swal-background-color;
}

Такой подход упрощает изменение дизайна в будущем и облегчает поддержку кода.

Итог

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

Оглавление