Заголовок уведомления

Библиотека iziToast предоставляет возможность создавать настраиваемые уведомления с минимальными усилиями. Одним из ключевых элементов любого уведомления является заголовок — текст, который сразу привлекает внимание пользователя и задаёт контекст сообщения. В iziToast заголовок задаётся через параметр title при создании уведомления.

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

В данном примере title равен 'Успех'. Он отображается жирным шрифтом в верхней части уведомления и отделяется от основного текста (message). Заголовок может быть пустым или полностью отсутствовать, если уведомление не требует выделения основной идеи.

Настройка стиля заголовка

Заголовок поддерживает различные CSS-свойства, которые можно изменять через параметр titleColor или через глобальные стили:

iziToast.show({
    title: 'Ошибка',
    titleColor: '#ff0000',
    message: 'Произошла ошибка при загрузке данных'
});
  • titleColor — цвет текста заголовка. Может быть любым валидным CSS-цветом (HEX, RGB, именованным).
  • titleSize — размер текста заголовка. Указывается в пикселях или единицах CSS (px, em).
  • titleLineHeight — высота строки заголовка, что позволяет корректно выравнивать текст при длинных заголовках.

Поддержка HTML и форматирования

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

iziToast.show({
    title: '<strong>Внимание!</strong>',
    message: 'Не забудьте сохранить изменения',
    titleColor: '#FFA500'
});

В данном примере тег <strong> делает текст заголовка жирным, несмотря на стандартное оформление iziToast. Важно использовать HTML с осторожностью, чтобы не нарушить общую верстку уведомления.

Динамические заголовки

Заголовок можно формировать динамически, основываясь на логике приложения:

let userStatus = 'гость';
iziToast.show({
    title: `Привет, ${userStatus}!`,
    message: 'Добро пожаловать на сайт'
});

Такая практика позволяет создавать персонализированные уведомления, которые повышают вовлечённость пользователя.

Ограничение длины и перенос строк

Если заголовок слишком длинный, iziToast автоматически переносит текст на новую строку. Для контроля отображения можно использовать CSS-свойство white-space через кастомные классы:

iziToast.settings({
    toastClass: 'custom-toast'
});

/* CSS */
.custom-toast .iziToast-title {
    white-space: normal; /* перенос строк для длинных заголовков */
    overflow: hidden;
    text-overflow: ellipsis;
}

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

Многострочные заголовки

Поддерживаются многострочные заголовки с использованием тегов <br>:

iziToast.show({
    title: 'Ошибка загрузки<br>Пожалуйста, попробуйте позже',
    message: 'Если проблема повторяется, обратитесь в поддержку'
});

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

Взаимодействие с темами и позиционированием

Заголовок корректно отображается независимо от темы (light, dark) и позиции уведомления (topRight, bottomLeft и т.д.). Параметры оформления заголовка можно задавать глобально через метод iziToast.settings, чтобы единообразно стилизовать все уведомления:

iziToast.settings({
    titleColor: '#FFFFFF',
    titleSize: 16,
    titleLineHeight: 20
});

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

Анимация заголовка

Хотя iziToast анимирует всё уведомление целиком, можно использовать кастомные CSS-анимации для заголовка через классы. Например, добавление эффекта появления заголовка:

.iziToast-title {
    animation: fadeInTitle 0.5s ease-in-out;
}

@keyframes fadeInTitle {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

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

Выводы по заголовку

Заголовок — основной инструмент структурирования уведомления в iziToast. Он задаёт акцент, облегчает восприятие информации и поддерживает персонализацию. Возможность использовать цвет, размер, HTML, перенос строк и динамическую генерацию делает заголовок гибким элементом интерфейса, который можно адаптировать под любые требования веб-приложения.

Оглавление