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

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

Toastify({
    text: "Это первая строка\nЭто вторая строка\nИ ещё одна строка",
    duration: 5000,
    gravity: "top",
    position: "right",
    close: true,
    style: {
        background: "linear-gradient(to right, #00b09b, #96c93d)"
    }
}).showToast();

В данном примере используется символ \n для переноса текста на новую строку. Важно понимать, что стандартная строка JavaScript воспринимает \n как разрыв строки, и Toastify корректно отобразит многострочный текст.

Форматирование текста в многострочных уведомлениях

Для более сложного форматирования можно использовать HTML-теги, включив параметр escapeMarkup: false. Это позволяет вставлять переносы, жирный текст, списки и другие HTML-элементы.

Toastify({
    node: document.createElement("div"),
    duration: 7000,
    gravity: "bottom",
    position: "center",
    close: true,
    escapeMarkup: false,
}).showToast();

const toastContent = document.createElement("div");
toastContent.innerHTML = `
    <strong>Заголовок уведомления</strong><br>
    Первая строка текста<br>
    Вторая строка с <em>курсивом</em><br>
    Список:
    <ul>
        <li>Элемент 1</li>
        <li>Элемент 2</li>
    </ul>
`;

Toastify({
    node: toastContent,
    duration: 8000,
    gravity: "top",
    position: "left",
    close: true,
}).showToast();

Ключевые моменты:

  • node позволяет вставлять полноценный HTML-элемент.
  • escapeMarkup: false отключает автоматическое экранирование HTML.
  • Стили и форматирование можно полностью контролировать через CSS или встроенные стили.

Настройка стилей для многострочного текста

Многострочные уведомления часто требуют более гибкой визуальной настройки. В Toastify это достигается через объект style или подключаемые CSS-классы.

Toastify({
    text: "Первая строка\nВторая строка\nТретья строка",
    duration: 6000,
    close: true,
    gravity: "bottom",
    position: "right",
    style: {
        background: "#333",
        color: "#fff",
        padding: "20px",
        lineHeight: "1.6",
        fontSize: "16px",
        borderRadius: "10px",
        boxShadow: "0 4px 8px rgba(0,0,0,0.2)"
    }
}).showToast();

Рекомендации по стилям:

  • lineHeight помогает сделать текст более читаемым.
  • padding и borderRadius визуально отделяют уведомление от контента страницы.
  • Цвета и шрифты можно менять в зависимости от типа уведомления (информация, предупреждение, ошибка).

Управление высотой и переносами текста

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

Toastify({
    node: document.createElement("div"),
    duration: 7000,
    gravity: "top",
    position: "center",
    close: true,
}).showToast();

const longTextToast = document.createElement("div");
longTextToast.innerHTML = "Длинный текст уведомления, который должен переноситься автоматически при достижении ширины контейнера.";

longTextToast.style.whiteSpace = "pre-wrap";
longTextToast.style.wordWrap = "break-word";
longTextToast.style.maxWidth = "300px";

Toastify({
    node: longTextToast,
    duration: 7000,
    close: true,
    gravity: "top",
    position: "center"
}).showToast();

Использование white-space: pre-wrap сохраняет переносы строк, а word-wrap: break-word предотвращает выход текста за границы уведомления. maxWidth ограничивает ширину блока и делает уведомление компактным.

Анимации и последовательность многострочных уведомлений

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

const messages = [
    "Первая строка уведомления",
    "Вторая строка с дополнительной информацией",
    "Третья строка с ссылкой <a href='#'>Подробнее</a>"
];

messages.forEach((msg, index) => {
    Toastify({
        node: (() => {
            const div = document.createElement("div");
            div.innerHTML = msg;
            return div;
        })(),
        duration: 3000 + index * 2000,
        gravity: "top",
        position: "right",
        close: true,
        escapeMarkup: false
    }).showToast();
});

Особенности:

  • Последовательное отображение уведомлений создаёт эффект «цепочки».
  • Продолжительность каждой нотификации можно увеличивать, чтобы пользователь успевал прочитать весь текст.
  • HTML внутри уведомлений позволяет добавлять ссылки и интерактивные элементы.

Практические советы

  1. Не перегружать уведомление текстом. Если сообщение очень длинное, лучше использовать свёрнутый вариант с кнопкой «Подробнее».
  2. Использовать переносы строк и списки. Это повышает читаемость многострочного текста.
  3. Подбирать стили под контекст. Информационные сообщения, предупреждения и ошибки должны визуально различаться.
  4. Тестировать на разных устройствах. Многострочный текст может отображаться по-разному на мобильных экранах и десктопе.

Многострочные уведомления в Toastify предоставляют гибкий инструмент для информирования пользователей, позволяя создавать аккуратные, читаемые и визуально привлекательные уведомления с любым количеством текста.

Оглавление