Адаптивная стилизация

Для начала необходимо подключить библиотеку Toastify в проект. Она доступна через CDN или npm. При использовании CDN подключение выглядит так:

Через npm установка осуществляется командой:

npm install toastify-js

И подключение в проекте через модульный импорт:

import Toastify from 'toastify-js';
import "toastify-js/src/toastify.css";

Для базовой инициализации уведомления используется метод Toastify() с объектом настроек:

Toastify({
    text: "Пример уведомления",
    duration: 3000
}).showToast();

text — текст уведомления, duration — время отображения в миллисекундах.

Основы адаптивной стилизации

Адаптивная стилизация в Toastify подразумевает динамическое изменение внешнего вида уведомлений в зависимости от устройства, разрешения экрана или контекста приложения. Основные параметры, которые можно адаптировать:

  • backgroundColor — фон уведомления
  • color — цвет текста
  • gravity — положение по вертикали (top или bottom)
  • position — положение по горизонтали (left, center, right)
  • style — объект со стилями CSS

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

const isMobile = window.innerWidth <= 768;

Toastify({
    text: "Адаптивное уведомление",
    duration: 4000,
    gravity: isMobile ? "bottom" : "top",
    position: isMobile ? "center" : "right",
    style: {
        background: isMobile ? "#ff6b6b" : "#1dd1a1",
        color: "#fff",
        fontSize: isMobile ? "14px" : "16px"
    }
}).showToast();

Использование медиа-запросов через JavaScript

Для более точной адаптации стилей можно использовать window.matchMedia и слушатели событий изменения размера окна:

function showResponsiveToast() {
    const smallScreen = window.matchMedia("(max-width: 600px)").matches;

    Toastify({
        text: "Уведомление с медиа-запросом",
        duration: 3500,
        gravity: smallScreen ? "bottom" : "top",
        position: "center",
        style: {
            background: smallScreen ? "#ff9f43" : "#00d2d3",
            fontSize: smallScreen ? "12px" : "18px"
        }
    }).showToast();
}

window.addEventListener("resize", showResponsiveToast);
showResponsiveToast();

Это позволяет уведомлениям адаптироваться автоматически при изменении размера экрана.

Кастомизация через CSS-классы

Toastify поддерживает добавление кастомных CSS-классов через свойство className. Это дает возможность создавать более сложные адаптивные стили с использованием медиазапросов в CSS:

Toastify({
    text: "Уведомление с кастомным классом",
    duration: 4000,
    className: "custom-toast"
}).showToast();
.custom-toast {
    background-color: #3498db;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
}

@media (max-width: 768px) {
    .custom-toast {
        background-color: #e74c3c;
        font-size: 14px;
    }
}

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

Адаптация анимаций

Toastify позволяет задавать собственные анимации через свойства offset и stopOnFocus. Для адаптивной анимации можно использовать условные стили в зависимости от размера экрана:

const isSmallScreen = window.innerWidth <= 480;

Toastify({
    text: "Уведомление с адаптивной анимацией",
    duration: 3000,
    gravity: "top",
    position: "right",
    style: {
        background: "#2e86de",
        transform: isSmallScreen ? "translateY(20px)" : "translateY(0)"
    },
    stopOnFocus: true
}).showToast();

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

Динамическая смена темной и светлой темы

Для поддержки темной и светлой темы в приложении можно использовать адаптивные стили в сочетании с prefers-color-scheme:

const darkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;

Toastify({
    text: "Уведомление с поддержкой темы",
    duration: 4000,
    gravity: "top",
    position: "center",
    style: {
        background: darkMode ? "#222f3e" : "#f1f2f6",
        color: darkMode ? "#f1f2f6" : "#222f3e",
        border: "1px solid " + (darkMode ? "#57606f" : "#dcdde1")
    }
}).showToast();

Смена темы выполняется автоматически при изменении системных настроек пользователя.

Комбинация адаптивной стилизации с событиями приложения

Toastify можно интегрировать с состоянием приложения для более динамичного взаимодействия:

function notifyUser(status) {
    const colors = {
        success: "#2ed573",
        warning: "#ffa502",
        error: "#ff4757"
    };

    const positions = {
        mobile: { gravity: "bottom", position: "center" },
        desktop: { gravity: "top", position: "right" }
    };

    const isMobile = window.innerWidth <= 768;

    Toastify({
        text: `Статус: ${status}`,
        duration: 3500,
        gravity: isMobile ? positions.mobile.gravity : positions.desktop.gravity,
        position: isMobile ? positions.mobile.position : positions.desktop.position,
        style: { background: colors[status], color: "#fff" }
    }).showToast();
}

notifyUser("success");

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

Оглавление