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

Noty — это библиотека JavaScript для создания настраиваемых уведомлений. Она позволяет выводить сообщения различного типа (информационные, предупреждения, ошибки, успехи) и управлять их внешним видом, анимацией и временем отображения. Для создания уведомления используется объект конфигурации с ключевыми параметрами, такими как text, type, layout, timeout и animation.

new Noty({
    text: 'Это уведомление',
    type: 'success',
    layout: 'topRight',
    timeout: 3000,
    animation: {
        open: 'animated bounceInRight',
        close: 'animated bounceOutRight'
    }
}).show();
  • text — основной текст уведомления, может содержать HTML-разметку.
  • type — тип уведомления: alert, success, error, warning, info.
  • layout — позиция на экране: top, topLeft, topRight, bottom, bottomLeft, bottomRight, center.
  • timeout — время в миллисекундах до автоматического скрытия уведомления; false отключает автозакрытие.
  • animation — объект с классами для анимации появления (open) и скрытия (close).

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

Для отображения многострочного текста можно использовать как стандартные HTML-теги, так и символы переноса строки. Noty поддерживает интерпретацию HTML внутри свойства text.

Использование <br> для переносов

new Noty({
    text: 'Первая строка<br>Вторая строка<br>Третья строка',
    type: 'info',
    layout: 'topRight',
    timeout: 5000
}).show();

Каждый <br> создаёт новую строку в уведомлении. Этот подход удобен, если текст заранее известен и статичен.

Использование шаблонных строк ES6

Если текст динамический, проще использовать шаблонные строки:

const lines = ['Первая строка', 'Вторая строка', 'Третья строка'];

new Noty({
    text: `${lines.join('<br>')}`,
    type: 'warning',
    layout: 'bottomLeft',
    timeout: 4000
}).show();

Метод join('<br>') объединяет массив строк с HTML-переносом между элементами. Это позволяет формировать уведомления из данных, полученных из API или форм.

Стилизация многострочного текста

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

new Noty({
    text: '<div class="custom-text">Первая строка<br>Вторая строка</div>',
    type: 'alert',
    theme: 'metroui',
    layout: 'center'
}).show();
.custom-text {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    white-space: pre-line;
}

white-space: pre-line позволяет интерпретировать переносы строк, если текст подставляется через JavaScript с \n:

const message = "Первая строка\nВторая строка\nТретья строка";

new Noty({
    text: message.replace(/\n/g, '<br>'),
    type: 'success'
}).show();

Встраивание сложного HTML и элементов

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

new Noty({
    text: `
        <strong>Список задач:</strong>
        <ul>
            <li>Задача 1</li>
            <li>Задача 2</li>
            <li>Задача 3</li>
        </ul>
    `,
    type: 'info',
    layout: 'topRight',
    timeout: 6000
}).show();

Можно добавлять интерактивные элементы, например, кнопки для подтверждения действий:

new Noty({
    text: 'Вы хотите удалить элемент?',
    type: 'warning',
    layout: 'topCenter',
    buttons: [
        Noty.button('Да', 'btn btn-success', function () {
            console.log('Элемент удален');
        }),
        Noty.button('Нет', 'btn btn-danger', function (noty) {
            noty.close();
        })
    ]
}).show();

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

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

.noty_body {
    max-height: 150px;
    overflow-y: auto;
}

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

Динамическое обновление текста

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

const n = new Noty({
    text: 'Инициализация...',
    type: 'info',
    timeout: false
}).show();

setTimeout(() => {
    n.setText('Загрузка завершена<br>Готово к работе');
    n.setType('success');
}, 3000);

Использование setText и setType позволяет обновлять уведомления в реальном времени, сохраняя позицию и стиль.

Вывод

Многострочный текст в Noty легко реализуется через HTML-теги, шаблонные строки, динамическое формирование данных и CSS-стили. Библиотека обеспечивает гибкость в управлении контентом, визуальными эффектами и интерактивными элементами уведомлений. Это делает Noty мощным инструментом для построения информативных и настраиваемых пользовательских сообщений в веб-приложениях.

Оглавление