Цветовые схемы

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

Стандартные типы уведомлений

iziToast имеет встроенные предустановленные типы уведомлений, каждому из которых соответствует своя цветовая схема:

  • success – зеленый фон с белым текстом. Используется для сообщений об успешных действиях.
  • error – красный фон с белым текстом. Применяется для ошибок или критических уведомлений.
  • warning – оранжевый фон с темным текстом. Предназначен для предупреждений.
  • info – синий фон с белым текстом. Используется для информационных сообщений.
  • question – серо-голубой фон с темным текстом. Применяется для запросов или уточняющих сообщений.

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

iziToast.success({
    title: 'Успешно!',
    message: 'Данные успешно сохранены',
    position: 'topRight'
});

iziToast.error({
    title: 'Ошибка!',
    message: 'Не удалось загрузить данные',
    position: 'topRight'
});

Кастомизация цветов

Помимо стандартных типов, iziToast позволяет полностью контролировать цвета уведомлений через параметры backgroundColor, titleColor, messageColor и iconColor.

Пример кастомного уведомления:

iziToast.show({
    title: 'Настроенный цвет',
    message: 'Сообщение с индивидуальной цветовой схемой',
    position: 'topRight',
    backgroundColor: '#2c3e50',
    titleColor: '#ecf0f1',
    messageColor: '#bdc3c7',
    iconColor: '#e74c3c'
});

Объяснение параметров:

  • backgroundColor – цвет фона уведомления.
  • titleColor – цвет текста заголовка.
  • messageColor – цвет текста основного сообщения.
  • iconColor – цвет иконки уведомления (если используется).

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

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

Пример динамического выбора цвета:

let status = 'warning';

let colors = {
    success: {bg: '#27ae60', title: '#ffffff', message: '#dff0d8'},
    error: {bg: '#c0392b', title: '#ffffff', message: '#f2dede'},
    warning: {bg: '#e67e22', title: '#ffffff', message: '#fcf8e3'},
    info: {bg: '#3498db', title: '#ffffff', message: '#d9edf7'}
};

iziToast.show({
    title: 'Статус уведомления',
    message: 'Цвет уведомления зависит от статуса',
    position: 'topRight',
    backgroundColor: colors[status].bg,
    titleColor: colors[status].title,
    messageColor: colors[status].message
});

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

Градиенты и прозрачность

iziToast поддерживает использование RGBA для создания прозрачных уведомлений и градиентов через CSS. Пример с полупрозрачным фоном:

iziToast.show({
    title: 'Прозрачное уведомление',
    message: 'Фон с прозрачностью 0.8',
    position: 'topRight',
    backgroundColor: 'rgba(46, 204, 113, 0.8)',
    titleColor: '#ffffff',
    messageColor: '#ecf0f1'
});

Градиенты на фоне можно задавать через CSS-класс:

.custom-toast {
    background: linear-gradient(45deg, #3498db, #9b59b6);
}
iziToast.show({
    title: 'Градиент',
    message: 'Уведомление с градиентным фоном',
    class: 'custom-toast',
    titleColor: '#ffffff',
    messageColor: '#ecf0f1',
    position: 'topRight'
});

Использование цветовых схем для UX

  • Единый стиль проекта – все уведомления должны соответствовать фирменным цветам и визуальному дизайну.
  • Интуитивная расстановка приоритетов – цвета помогают пользователю отличать ошибки, предупреждения и успешные операции.
  • Контраст и читаемость – текст и иконки должны быть четко видны на фоне уведомления.

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

Оглавление