Переопределение стилей по умолчанию

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

Настройка глобальных параметров

Все уведомления iziToast используют глобальные настройки, которые можно определить один раз и применять ко всем последующим вызовам. Глобальные параметры задаются через метод iziToast.settings():

iziToast.settings({
    timeout: 5000,
    position: 'topRight',
    transitionIn: 'fadeInDown',
    transitionOut: 'fadeOutUp',
    theme: 'dark',
    close: true
});

Ключевые моменты:

  • timeout – время отображения уведомления в миллисекундах. Можно установить false, чтобы уведомление не закрывалось автоматически.
  • position – положение уведомления на экране (topRight, topLeft, bottomRight, bottomLeft, center).
  • transitionIn и transitionOut – анимации появления и скрытия. Поддерживаются стандартные анимации библиотеки и пользовательские классы CSS.
  • theme – визуальная тема (light или dark).
  • close – отображение кнопки закрытия.

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

Каждое уведомление iziToast позволяет передавать параметры стиля непосредственно в метод вызова. Например:

iziToast.show({
    title: 'Успех',
    message: 'Данные сохранены',
    color: 'green',
    icon: 'icon-check',
    titleColor: '#ffffff',
    messageColor: '#e0e0e0',
    progressBarColor: '#ff0000',
    backgroundColor: '#333333',
    timeout: 7000
});

Важные параметры стиля:

  • color – основной цвет уведомления. Используется для фона заголовка и иконки.
  • backgroundColor – цвет фона всего уведомления.
  • titleColor и messageColor – цвета текста заголовка и сообщения.
  • progressBarColor – цвет индикатора прогресса.
  • icon – возможность использовать иконку, можно передать HTML или класс из библиотеки иконок.

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

Для более гибкой настройки внешнего вида можно применять свой CSS-класс через параметр class:

iziToast.show({
    title: 'Внимание',
    message: 'Срок действия истекает',
    class: 'custom-toast'
});
.custom-toast {
    border-left: 5px solid #ff9900;
    font-family: 'Arial', sans-serif;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.custom-toast .iziToast-title {
    font-weight: bold;
    font-size: 16px;
}
.custom-toast .iziToast-message {
    font-size: 14px;
    color: #f0f0f0;
}

Использование пользовательских классов позволяет:

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

Глобальная переопределяемая тема через CSS

iziToast подключает стандартные стили через CSS-файл iziToast.min.css. Можно переопределить большинство свойств на уровне глобальной темы:

.iziToast {
    border-radius: 10px;
    font-family: 'Roboto', sans-serif;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.iziToast-color-blue {
    background: linear-gradient(90deg, #2196F3, #64B5F6);
}

.iziToast-progressbar {
    height: 4px;
    border-radius: 2px;
}

Особенности:

  • Применение классов .iziToast-color-* позволяет задавать цветовые схемы для всех уведомлений конкретного типа (success, error, info, warning).
  • Глобальная переопределяемая тема влияет на все уведомления, даже если вызов метода не передает специфические параметры цвета.

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

Можно динамически создавать и применять стили через JavaScript для более сложных сценариев:

const style = document.createElement('style');
style.innerHTML = `
    .iziToast.dynamic {
        border-left: 8px solid #ff5722;
        background-color: #212121;
        color: #fff;
    }
`;
document.head.appendChild(style);

iziToast.show({
    title: 'Динамическое уведомление',
    message: 'Пример применения JS стилей',
    class: 'dynamic'
});

Такой подход позволяет:

  • изменять стили во время выполнения приложения,
  • адаптировать внешний вид уведомлений под контекст (например, различный дизайн для разных страниц),
  • интегрировать с темing системами и CSS-переменными.

Настройка шрифтов и размеров через CSS-переменные

Начиная с версии iziToast 1.4+, можно использовать CSS-переменные для глобальных шрифтов и цветов:

:root {
    --iziToast-font-family: 'Open Sans', sans-serif;
    --iziToast-title-font-size: 18px;
    --iziToast-message-font-size: 14px;
    --iziToast-background: #1e1e1e;
    --iziToast-color-success: #4caf50;
}

Это позволяет:

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

Итоговые рекомендации

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

Эта комбинация методов делает переопределение стилей в iziToast максимально гибким и мощным инструментом для фронтенд-разработки.

Оглавление