Метод setText()

Метод setText() предназначен для динамического изменения текста уведомления после его создания. Это особенно полезно, когда необходимо обновить содержимое уведомления в зависимости от изменений состояния приложения или асинхронных событий.

let notification = new Noty({
    text: 'Загрузка данных...',
    type: 'info',
    timeout: 3000
}).show();

// Через некоторое время меняем текст
notification.setText('Данные успешно загружены!');

Синтаксис

notyInstance.setText(newText)

Параметры:

  • newText — строка или HTML-код, который будет отображён внутри уведомления.

Возвращаемое значение:

  • Метод возвращает экземпляр Noty, что позволяет использовать цепочку вызовов (chaining).

Применение HTML в setText()

Метод поддерживает HTML-разметку. Это позволяет добавлять стилизованные элементы, ссылки или иконки:

notification.setText('<strong>Успех!</strong> Данные обновлены. <a href="#">Посмотреть</a>');

Важно помнить, что использование HTML открывает возможность XSS-уязвимостей, если вставляемые данные приходят из ненадёжных источников. Всегда следует экранировать пользовательский ввод.

Интеграция с другими методами Noty

Метод setText() можно комбинировать с другими методами для полной динамики уведомлений:

  • setType(type) — изменение типа уведомления (alert, success, error, warning, info).
  • setTimeout(milliseconds) — изменение времени отображения уведомления.
  • show() и close() — управление видимостью уведомления.

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

let notif = new Noty({
    text: 'Обработка запроса...',
    type: 'info',
    timeout: false
}).show();

setTimeout(() => {
    notif.setText('Запрос выполнен успешно!').setType('success').setTimeout(2000);
}, 2000);

Ограничения и особенности

  1. Синхронность: setText() выполняется синхронно, изменение текста происходит мгновенно.
  2. Размер текста: Длинный текст автоматически переносится, но необходимо следить за визуальной структурой уведомления.
  3. HTML-контент: Если уведомление содержит уже существующие элементы, вставка HTML через setText() заменяет всё содержимое контейнера.

Использование с событиями

Метод удобно применять внутри колбеков событий Noty, таких как onShow, onClose, onClick:

new Noty({
    text: 'Идёт загрузка...',
    type: 'info',
    timeout: false,
    callbacks: {
        onClick: function() {
            this.setText('Вы кликнули на уведомление!').setType('warning');
        }
    }
}).show();

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

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

  • Для коротких уведомлений лучше использовать строки без HTML, чтобы не усложнять верстку.
  • Для уведомлений с прогрессом можно динамически менять текст с процентами выполнения.
  • В случае многоразовых уведомлений создаётся один экземпляр Noty, и метод setText() позволяет менять текст многократно, избегая создания новых уведомлений.

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

Оглавление