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

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

Определение и подключение CSS-переменных

CSS-переменные (custom properties) задаются с использованием синтаксиса --имя-переменной. Для iziToast можно определить переменные как глобально в :root, так и локально для отдельных элементов или блоков:

:root {
    --iziToast-color: #ffffff;
    --iziToast-background: #2196f3;
    --iziToast-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    --iziToast-border-radius: 8px;
    --iziToast-font-size: 16px;
}

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

Настройка цветов и фона

Цвет текста и фон уведомлений – одни из самых часто изменяемых параметров. Для iziToast они настраиваются через переменные:

.iziToast {
    color: var(--iziToast-color);
    background-color: var(--iziToast-background);
}

Можно определить отдельные переменные для разных типов уведомлений:

:root {
    --iziToast-success-background: #4caf50;
    --iziToast-error-background: #f44336;
    --iziToast-warning-background: #ff9800;
    --iziToast-info-background: #2196f3;
}

И подключить их через селекторы:

.iziToast-success {
    background-color: var(--iziToast-success-background);
}
.iziToast-error {
    background-color: var(--iziToast-error-background);
}
.iziToast-warning {
    background-color: var(--iziToast-warning-background);
}
.iziToast-info {
    background-color: var(--iziToast-info-background);
}

Настройка отступов и размеров

Использование CSS-переменных упрощает контроль над внутренними и внешними отступами, размерами кнопок и контейнера уведомления:

:root {
    --iziToast-padding: 16px;
    --iziToast-margin: 12px;
    --iziToast-width: 320px;
    --iziToast-icon-size: 24px;
}

.iziToast {
    padding: var(--iziToast-padding);
    margin: var(--iziToast-margin);
    width: var(--iziToast-width);
}

.iziToast-icon {
    width: var(--iziToast-icon-size);
    height: var(--iziToast-icon-size);
}

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

Настройка шрифтов и типографики

iziToast позволяет изменять размер шрифта, межстрочный интервал, начертание и тип шрифта с помощью переменных:

:root {
    --iziToast-font-family: 'Roboto', sans-serif;
    --iziToast-font-size: 14px;
    --iziToast-line-height: 1.4;
    --iziToast-font-weight: 500;
}

.iziToast {
    font-family: var(--iziToast-font-family);
    font-size: var(--iziToast-font-size);
    line-height: var(--iziToast-line-height);
    font-weight: var(--iziToast-font-weight);
}

Кастомизация теней и границ

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

:root {
    --iziToast-border-radius: 10px;
    --iziToast-box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.iziToast {
    border-radius: var(--iziToast-border-radius);
    box-shadow: var(--iziToast-box-shadow);
}

Динамическая смена темы

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

:root {
    --iziToast-color: #000;
    --iziToast-background: #fff;
}

[data-theme="dark"] {
    --iziToast-color: #fff;
    --iziToast-background: #333;
}

В JavaScript достаточно изменить атрибут data-theme на body:

document.body.setAttribute('data-theme', 'dark');
iziToast.show({
    title: 'Тёмная тема',
    message: 'Уведомление адаптировано под тему'
});

Преимущества использования CSS-переменных

  • Гибкость: можно менять стиль уведомлений в одном месте без изменения кода вызова iziToast.
  • Совместимость: работает с любыми современными браузерами, поддерживающими CSS-переменные.
  • Модульность: легко создавать темы и переопределять отдельные свойства для разных частей приложения.
  • Динамичность: позволяет изменять внешний вид уведомлений на лету, реагируя на действия пользователя или системные события.

Практическая структура проекта

Рекомендуется хранить переменные в отдельном файле variables.css:

/* variables.css */
:root {
    --iziToast-color: #fff;
    --iziToast-background: #2196f3;
    --iziToast-padding: 16px;
    --iziToast-border-radius: 8px;
    --iziToast-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

И подключать его до основного CSS iziToast:

<link rel="stylesheet" href="variables.css">
<link rel="stylesheet" href="iziToast.min.css">

Так обеспечивается централизованное управление стилем уведомлений без дублирования кода.

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

Оглавление