Создание тем оформления

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

Структура темы

Тема в iziToast — это объект с набором CSS-подобных свойств, который может быть зарегистрирован глобально. Минимальная структура темы выглядит так:

iziToast.settings({
    theme: 'customTheme',
    color: 'blue',
    titleColor: '#fff',
    messageColor: '#eee',
    iconColor: '#fff',
    backgroundColor: '#007bff',
    close: true,
    layout: 2,
    balloon: false,
});

Ключевые параметры:

  • theme — уникальное имя темы. При использовании уведомления указывается это имя.
  • color — основной цвет уведомления, влияет на иконку и границы.
  • titleColor — цвет заголовка.
  • messageColor — цвет текста сообщения.
  • iconColor — цвет иконки.
  • backgroundColor — фоновый цвет.
  • close — отображение кнопки закрытия.
  • layout — схема расположения элементов внутри уведомления. Например, 1 — горизонтальное выравнивание, 2 — вертикальное.
  • balloon — если true, уведомление имеет закругленные края и визуально напоминает воздушный пузырь.

Регистрация собственной темы

Чтобы использовать собственную тему, её нужно зарегистрировать через метод iziToast.settings перед созданием уведомлений. Пример:

iziToast.settings({
    theme: 'darkBlue',
    color: 'darkblue',
    backgroundColor: '#1a1a2e',
    titleColor: '#e0e0e0',
    messageColor: '#c0c0c0',
    iconColor: '#00aaff',
    close: true,
    layout: 1,
});

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

iziToast.show({
    theme: 'darkBlue',
    title: 'Информация',
    message: 'Уведомление с темой darkBlue'
});

Настройка специфических элементов

Иконки

  • icon — путь к SVG или класс для Font Awesome.
  • iconColor — цвет иконки. Если не задан, используется цвет из color.
iziToast.show({
    theme: 'darkBlue',
    title: 'Успех',
    message: 'Файл загружен',
    icon: 'fa fa-check-circle',
    iconColor: '#00ff00'
});

Кнопка закрытия

Можно изменить стили кнопки закрытия через тему:

iziToast.settings({
    theme: 'customClose',
    close: true,
    closeColor: '#ff0000',
    closeIcon: 'fa fa-times'
});

closeColor задаёт цвет крестика, а closeIcon позволяет заменить стандартный символ на иконку.

Отступы и размеры

  • padding — внутренние отступы уведомления.
  • radius — скругление углов.
  • width — фиксированная ширина уведомления, если необходимо.
iziToast.settings({
    theme: 'spacious',
    padding: 20,
    radius: 8,
    width: 350
});

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

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

iziToast.settings({
    theme: 'successTheme',
    backgroundColor: '#28a745',
    titleColor: '#fff'
});

iziToast.settings({
    theme: 'errorTheme',
    backgroundColor: '#dc3545',
    titleColor: '#fff'
});

iziToast.show({
    theme: 'successTheme',
    title: 'Успех',
    message: 'Операция выполнена успешно'
});

iziToast.show({
    theme: 'errorTheme',
    title: 'Ошибка',
    message: 'Произошла ошибка'
});

Переопределение стандартной темы

Можно глобально изменить стандартную тему default:

iziToast.settings({
    theme: 'default',
    backgroundColor: '#333',
    titleColor: '#fff',
    messageColor: '#ccc',
    iconColor: '#ffcc00'
});

Все уведомления, которые не указывают явную тему, будут использовать эти настройки.

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

iziToast позволяет динамически изменять тему прямо при вызове уведомления:

iziToast.show({
    theme: 'light',
    title: 'Напоминание',
    message: 'Проверьте настройки',
    color: 'orange',
    backgroundColor: '#fff'
});

Таким образом, одна и та же тема может быть изменена для конкретного уведомления без регистрации новой глобальной темы.

Продвинутые возможности

  • CSS-переменные: можно использовать для тем переменные, которые задают цвета и размеры. Это удобно при работе с темной/светлой схемой.
  • Кастомные анимации: через transitionIn и transitionOut можно менять анимацию появления и скрытия уведомления для каждой темы.
  • Balloon и Layout: комбинируя эти параметры, создаются уведомления с уникальной визуальной структурой, например вертикально расположенные заголовок, сообщение и кнопка.
iziToast.settings({
    theme: 'balloonInfo',
    balloon: true,
    layout: 2,
    backgroundColor: '#00aaff',
    titleColor: '#fff',
    messageColor: '#f0f0f0'
});

Итоговые рекомендации по созданию тем

  1. Всегда задавать уникальное имя для каждой темы.
  2. Продумывать сочетание цветов заголовка, текста и фона для читаемости.
  3. Использовать layout и balloon для управления визуальной структурой.
  4. При необходимости создавать отдельные темы для разных типов уведомлений: успех, ошибка, информация, предупреждение.
  5. Комбинировать глобальные настройки и динамическое переопределение параметров для гибкости.
Оглавление