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

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

Для начала необходимо подключить стили Noty и определить собственные CSS-переменные в корневом элементе документа:

:root {
    --noty-bg-success: #28a745;
    --noty-bg-error: #dc3545;
    --noty-bg-warning: #ffc107;
    --noty-bg-info: #17a2b8;
    --noty-text-color: #ffffff;
    --noty-font-size: 16px;
    --noty-border-radius: 6px;
    --noty-padding: 12px 20px;
    --noty-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

После определения переменных, можно использовать их в стилях Noty:

.noty_type__success {
    background-color: var(--noty-bg-success);
    color: var(--noty-text-color);
    font-size: var(--noty-font-size);
    border-radius: var(--noty-border-radius);
    padding: var(--noty-padding);
    box-shadow: var(--noty-box-shadow);
}

.noty_type__error {
    background-color: var(--noty-bg-error);
    color: var(--noty-text-color);
    font-size: var(--noty-font-size);
    border-radius: var(--noty-border-radius);
    padding: var(--noty-padding);
    box-shadow: var(--noty-box-shadow);
}

.noty_type__warning {
    background-color: var(--noty-bg-warning);
    color: var(--noty-text-color);
    font-size: var(--noty-font-size);
    border-radius: var(--noty-border-radius);
    padding: var(--noty-padding);
    box-shadow: var(--noty-box-shadow);
}

.noty_type__info {
    background-color: var(--noty-bg-info);
    color: var(--noty-text-color);
    font-size: var(--noty-font-size);
    border-radius: var(--noty-border-radius);
    padding: var(--noty-padding);
    box-shadow: var(--noty-box-shadow);
}

Динамическая кастомизация через CSS-переменные

CSS-переменные позволяют менять стили уведомлений на лету. Для изменения темы уведомлений достаточно изменить значение переменной в Jav * aScript:

document.documentElement.style.setProperty('--noty-bg-success', '#4caf50');
document.documentElement.style.setProperty('--noty-bg-error', '#f44336');
document.documentElement.style.setProperty('--noty-font-size', '18px');

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

Использование Noty с переменными для типов уведомлений

При создании уведомлений через Noty переменные автоматически применяются благодаря CSS:

new Noty({
    type: 'success',
    text: 'Операция выполнена успешно!',
    layout: 'topRight',
    timeout: 3000,
    theme: 'mint'
}).show();

new Noty({
    type: 'error',
    text: 'Произошла ошибка при выполнении запроса!',
    layout: 'topRight',
    timeout: 4000,
    theme: 'mint'
}).show();

Благодаря определению стилей через CSS-переменные, смена внешнего вида всех уведомлений данного типа осуществляется централизованно.

Адаптивность и медиа-запросы

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

@media (max-width: 768px) {
    :root {
        --noty-font-size: 14px;
        --noty-padding: 10px 15px;
        --noty-border-radius: 4px;
    }
}

Все уведомления автоматически подстраиваются под новые значения переменных без изменений в JavaScript-коде.

Комбинация с пользовательскими темами Noty

Noty поддерживает собственные темы, но CSS-переменные позволяют расширить их возможности. Создание темы с переменными выглядит так:

.noty_theme__custom {
    font-family: 'Arial', sans-serif;
    font-weight: 500;
}

.noty_theme__custom .noty_body {
    background-color: var(--noty-bg-info);
    color: var(--noty-text-color);
}

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

new Noty({
    type: 'info',
    text: 'Информационное уведомление с кастомной темой',
    layout: 'bottomLeft',
    timeout: 2500,
    theme: 'custom'
}).show();

Итоговое управление стилями

  • Цвета и фоны: управление через --noty-bg-* и --noty-text-color.
  • Размеры и отступы: через --noty-font-size и --noty-padding.
  • Форма и тени: через --noty-border-radius и --noty-box-shadow.

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

Оглавление