Форматирование текста

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

Установка и базовая структура

Для начала необходимо подключить библиотеку. В современных проектах это обычно делается через npm:

import Toastify from 'toastify-js';
import "toastify-js/src/toastify.css";

Минимальный вызов уведомления выглядит так:

Toastify({
  text: "Пример уведомления",
  duration: 3000
}).showToast();

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

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

Одним из основных инструментов форматирования является возможность вставки HTML-тегов в текст уведомления. Для этого используется свойство text вместе с настройкой escape:

Toastify({
  text: "<b>Важное сообщение</b> с <i>курсивом</i> и <span style='color:red;'>цветным текстом</span>",
  duration: 5000,
  escape: false
}).showToast();
  • escape: false отключает автоматическое экранирование HTML.
  • Любые стандартные теги <b>, <i>, <u>, <span> и <a> работают корректно.
  • Это позволяет использовать стили для выделения частей текста или создания ссылок прямо в уведомлении.

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

Помимо HTML, Toastify поддерживает стили через объект style. Это позволяет задавать CSS-свойства для текста и контейнера уведомления:

Toastify({
  text: "Стильный текст",
  duration: 4000,
  style: {
    background: "#333",
    color: "#fff",
    fontSize: "16px",
    fontWeight: "bold",
    fontFamily: "Arial, sans-serif",
    textAlign: "center",
    padding: "10px"
  }
}).showToast();

Ключевые свойства:

  • color – цвет текста.
  • fontSize – размер шрифта.
  • fontWeight – толщина шрифта (normal, bold, lighter, числовые значения).
  • fontFamily – шрифт или семейство шрифтов.
  • textAlign – выравнивание текста (left, center, right).
  • lineHeight – межстрочный интервал.

Многострочные уведомления

Для отображения нескольких строк используется комбинация HTML и CSS:

Toastify({
  text: "Первая строка<br>Вторая строка<br><span style='color:blue;'>Третья строка</span>",
  duration: 5000,
  escape: false,
  style: {
    textAlign: "left",
    lineHeight: "1.5"
  }
}).showToast();
  • <br> позволяет создавать переносы строк.
  • lineHeight регулирует расстояние между строками для лучшей читаемости.

Добавление ссылок и интерактивного текста

Toastify позволяет вставлять активные ссылки с помощью HTML-тегов <a>:

Toastify({
  text: "<a href='https://example.com' target='_blank' style='color:yellow;'>Перейти на сайт</a>",
  duration: 6000,
  escape: false
}).showToast();
  • target='_blank' открывает ссылку в новой вкладке.
  • С помощью style внутри тега <a> можно задавать цвет, подчеркивание и другие свойства.

Настройка иконок и декоративных элементов

Хотя текстовая часть – ключевая, часто требуется добавить визуальные акценты рядом с текстом:

Toastify({
  node: (() => {
    const container = document.createElement("div");
    container.innerHTML = "<img src='icon.png' style='width:20px; margin-right:8px;'/> <b>Сообщение с иконкой</b>";
    return container;
  })(),
  duration: 4000
}).showToast();
  • Используется node вместо text, чтобы полностью контролировать содержимое уведомления.
  • Позволяет добавлять изображения, иконки и сложные HTML-структуры.

Динамическое форматирование текста

Для динамических сообщений можно комбинировать шаблонные строки JavaScript с HTML:

const userName = "Иван";
Toastify({
  text: `<b>Привет, ${userName}!</b><br><span style='color:green;'>Вы успешно вошли</span>`,
  duration: 5000,
  escape: false
}).showToast();
  • Шаблонные строки (${}) позволяют вставлять переменные.
  • Сочетание HTML и CSS делает уведомления персонализированными.

Настройка цвета и градиентов текста

Через CSS возможно создавать градиентные или тени для текста:

Toastify({
  text: "Градиентный текст",
  duration: 5000,
  escape: false,
  style: {
    background: "#222",
    color: "white",
    fontWeight: "bold",
    textShadow: "1px 1px 2px black",
    backgroundImage: "linear-gradient(to right, #f00, #ff0)",
    WebkitBackgroundClip: "text",
    color: "transparent"
  }
}).showToast();
  • textShadow добавляет тень к тексту.
  • Градиенты создаются через комбинацию backgroundImage и -webkit-background-clip: text.

Использование кастомных CSS-классов

Для больших проектов удобно создавать свои классы и применять их к тостам:

Toastify({
  text: "Текст с классом",
  duration: 4000,
  className: "custom-toast"
}).showToast();

И в CSS:

.custom-toast {
  font-family: 'Courier New', monospace;
  font-size: 18px;
  color: #ff5722;
  text-transform: uppercase;
}
  • className позволяет централизованно управлять стилями всех уведомлений.
  • Хорошо подходит для повторного использования шаблонов и поддержания единого дизайна.

Заключение по форматированию текста

Toastify предоставляет широкий спектр инструментов: от базового HTML до сложного CSS и кастомных узлов (node). Сочетание этих возможностей позволяет создавать уведомления с любым визуальным оформлением и уровнем интерактивности, сохраняя при этом простоту использования и гибкость библиотеки.

Оглавление