Пользовательские цвета фона

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

Использование свойства backgroundColor

Для задания цвета фона уведомления используется опция backgroundColor. Она принимает строку с любым допустимым CSS-значением цвета:

  • HEX: #ff0000, #00ff00
  • RGB / RGBA: rgb(255,0,0), rgba(0,255,0,0.5)
  • CSS-имя цвета: red, green, blue

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

iziToast.show({
    title: 'Ошибка',
    message: 'Произошла ошибка при загрузке данных',
    backgroundColor: '#ff4d4f', // насыщенный красный фон
    color: '#ffffff',           // цвет текста
    position: 'topRight'
});

В этом примере уведомление будет иметь красный фон, а текст будет белым. Свойство color задаёт цвет текста, что важно для поддержания читаемости при изменении фона.

Разные цвета для разных типов уведомлений

В iziToast можно создавать уведомления разных типов: success, error, warning, info. Каждому типу можно назначить собственный цвет фона через опцию backgroundColor.

iziToast.success({
    title: 'Успешно',
    message: 'Данные сохранены',
    backgroundColor: '#52c41a' // зелёный
});

iziToast.error({
    title: 'Ошибка',
    message: 'Не удалось загрузить файл',
    backgroundColor: '#ff4d4f' // красный
});

iziToast.warning({
    title: 'Внимание',
    message: 'Некорректные данные',
    backgroundColor: '#faad14' // оранжевый
});

iziToast.info({
    title: 'Информация',
    message: 'Новое обновление доступно',
    backgroundColor: '#1890ff' // синий
});

Такой подход позволяет визуально различать типы сообщений и усиливает пользовательский опыт за счёт цвета.

Динамическое изменение фона

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

const status = 'error'; // может быть 'success', 'warning', 'info'

const bgColors = {
    success: '#52c41a',
    error: '#ff4d4f',
    warning: '#faad14',
    info: '#1890ff'
};

iziToast.show({
    title: 'Статус запроса',
    message: `Запрос завершён со статусом: ${status}`,
    backgroundColor: bgColors[status],
    color: '#ffffff'
});

Использование объектной карты цветов делает код читаемым и легко масштабируемым при добавлении новых статусов.

Глобальная настройка цвета фона

Чтобы не указывать цвет для каждого уведомления вручную, iziToast позволяет настроить глобальные параметры через iziToast.settings. Например, можно задать дефолтный фон для всех уведомлений:

iziToast.settings({
    backgroundColor: '#333333', // тёмно-серый фон для всех тостов
    color: '#ffffff',
    position: 'bottomRight'
});

После этого все последующие уведомления будут использовать указанные цвета по умолчанию, пока не будет задано индивидуальное значение backgroundColor.

Градиенты и кастомные стили через CSS

Для более сложных эффектов, например градиентов, можно использовать кастомные классы и CSS:

iziToast.show({
    title: 'Новое уведомление',
    message: 'Градиентный фон применён',
    class: 'custom-gradient'
});
.custom-gradient {
    background: linear-gradient(90deg, #ff7a18, #af002d, #319197);
    color: #ffffff;
}

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

Советы по использованию цветов фона

  • Контрастность: всегда проверять читаемость текста на выбранном фоне.
  • Consistency: использовать единые цветовые схемы для одного типа уведомлений.
  • Accessibility: учитывать пользователей с нарушениями восприятия цвета, проверяя комбинации через инструменты доступности.

Настройка фона в iziToast — это мощный инструмент для улучшения визуальной коммуникации приложения, позволяющий создавать не только информативные, но и эстетически приятные уведомления.

Оглавление