Цвет текста

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

Свойство color

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

iziToast.show({
    title: 'Успешно',
    message: 'Данные сохранены',
    color: 'green'
});

Поддерживаются следующие форматы:

  • Название цвета: 'red', 'blue', 'green', 'black', 'white' и другие стандартные CSS-цвета.
  • HEX-коды: '#FF0000', '#00FF00', '#0000FF'.
  • RGB/RGBA: 'rgb(255, 0, 0)', 'rgba(0, 128, 0, 0.8)'.
  • HSL/HSLA: 'hsl(120, 100%, 50%)', 'hsla(240, 100%, 50%, 0.7)'.

Использование HEX-кодов и RGBA особенно удобно при необходимости точной настройки оттенка и прозрачности текста.

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

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

iziToast.success({
    title: 'Готово',
    message: 'Операция выполнена успешно',
    color: '#28a745'
});

iziToast.error({
    title: 'Ошибка',
    message: 'Произошла ошибка при сохранении данных',
    color: '#dc3545'
});

iziToast.info({
    title: 'Информация',
    message: 'Новое сообщение получено',
    color: '#17a2b8'
});

iziToast.warning({
    title: 'Внимание',
    message: 'Необходимо проверить данные',
    color: '#ffc107'
});

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

Наследование и приоритет стилей

Если одновременно задаются цвет текста через color и цвет фона через backgroundColor, приоритет остаётся за color для текста. CSS-свойства текста (font-family, font-size, font-weight) также могут быть настроены через параметр style:

iziToast.show({
    title: 'Внимание',
    message: 'Новый пользователь зарегистрировался',
    color: '#ffffff',
    backgroundColor: '#343a40',
    theme: 'dark',
    style: 'font-weight: bold; font-size: 16px;'
});

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

Динамическая смена цвета текста

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

let toast = iziToast.show({
    title: 'Обновление',
    message: 'Данные загружаются',
    color: 'blue'
});

// Через некоторое время меняем цвет текста
setTimeout(() => {
    toast.set({ color: 'orange' });
}, 3000);

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

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

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

iziToast.show({
    title: 'Пользовательский стиль',
    message: 'Текст с уникальным цветом',
    class: 'custom-toast'
});

CSS:

.custom-toast .iziToast-message {
    color: #ff69b4;
    font-style: italic;
}

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

Важные рекомендации

  • Цвет текста должен контрастировать с фоном уведомления для обеспечения читаемости.
  • Для темных фонов лучше использовать светлые цвета текста (#fff, #f8f9fa).
  • Для светлых фонов рекомендуется тёмный текст (#000, #212529).
  • Стараться использовать единый цветовой код для одного типа уведомлений, чтобы интерфейс выглядел гармонично.

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

Оглавление