Текст уведомления

В библиотеке Toastify текст уведомления задается через ключ text в объекте конфигурации. Это обязательное свойство, без которого уведомление не будет отображено. Значение свойства может быть как простой строкой, так и HTML-строкой, если включена поддержка HTML через метод html(true).

Пример базового уведомления:

Toastify({
    text: "Операция выполнена успешно",
    duration: 3000
}).showToast();

Здесь text содержит основной текст уведомления, а duration определяет время его отображения в миллисекундах.

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

Для расширенного форматирования текста можно использовать HTML. Для этого необходимо включить метод html(true) в конфигурации:

Toastify({
    text: "<b>Успех!</b> Данные сохранены",
    duration: 4000,
    html: true
}).showToast();

Особенности использования HTML в текстах:

  • Можно применять теги <b>, <i>, <span> и другие.
  • Стили CSS можно добавлять через атрибут style или через подключение внешних стилей.
  • HTML-теги в text без включённого html(true) будут отображены как обычный текст.

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

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

let username = "Иван";
let messageCount = 5;

Toastify({
    text: `Привет, ${username}! У вас ${messageCount} новых сообщений.`,
    duration: 5000
}).showToast();

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

function getNotificationText() {
    return "Внимание! Данные обновлены " + new Date().toLocaleTimeString();
}

Toastify({
    text: getNotificationText(),
    duration: 3000
}).showToast();

Многострочный текст

По умолчанию текст в уведомлении отображается в одну строку. Для создания многострочного текста применяются символы переноса \n:

Toastify({
    text: "Задача выполнена\nПроверка пройдена\nСледующий шаг: тестирование",
    duration: 4000
}).showToast();

При использовании HTML можно реализовать перенос через <br>:

Toastify({
    text: "Задача выполнена<br>Проверка пройдена<br>Следующий шаг: тестирование",
    duration: 4000,
    html: true
}).showToast();

Настройка стиля текста

Хотя библиотека Toastify не предоставляет встроенные методы форматирования текста напрямую через объект text, можно управлять стилем текста через style:

Toastify({
    text: "Успешно сохранено",
    duration: 3000,
    style: {
        background: "linear-gradient(to right, #00b09b, #96c93d)",
        color: "#ffffff",
        fontWeight: "bold",
        fontSize: "16px"
    }
}).showToast();

Через style можно изменять:

  • Цвет текста (color)
  • Размер шрифта (fontSize)
  • Начертание (fontWeight, fontStyle)
  • Выравнивание (textAlign)

Интернационализация и локализация текста

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

import i18next from "i18next";

Toastify({
    text: i18next.t("notification.success"),
    duration: 4000
}).showToast();

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

Особенности длинных сообщений

Если текст уведомления слишком длинный, Toastify автоматически обрезает его и добавляет многоточие, если не задано специальное оформление:

Toastify({
    text: "Очень длинное сообщение, которое может не помещаться в стандартный блок уведомления",
    duration: 5000,
    style: {
        whiteSpace: "normal",
        overflow: "visible"
    }
}).showToast();

Использование whiteSpace: "normal" позволяет отображать текст на нескольких строках вместо обрезки.

Поддержка специальных символов и эмодзи

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

Toastify({
    text: "⚠️ Внимание: ошибка сервера!",
    duration: 4000
}).showToast();

Библиотека корректно отображает такие символы, если выбран шрифт, поддерживающий юникод.

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

Оглавление