Метод show()

Метод show() является основным инструментом для отображения уведомлений в библиотеке Noty. Он управляет визуализацией созданного объекта уведомления и обеспечивает запуск всех связанных с показом событий.

Создание уведомления

Перед использованием метода show() необходимо создать экземпляр уведомления через конструктор Noty:

let notification = new Noty({
    text: 'Успешная операция!',
    type: 'success',
    layout: 'topRight',
    timeout: 3000,
    theme: 'mint'
});

Ключевые параметры:

  • text — текст уведомления. Может содержать HTML.
  • type — тип уведомления (alert, success, error, warning, information).
  • layout — расположение на экране (topRight, topLeft, bottomRight, bottomLeft, center, и др.).
  • timeout — время в миллисекундах до автоматического скрытия уведомления. Значение false отключает авто-закрытие.
  • theme — визуальная тема уведомления. Стандартные темы: relax, mint, metroui и др.

Вызов метода show()

После создания уведомления метод show() активирует его отображение:

notification.show();

При вызове выполняются следующие действия:

  1. Отрисовка DOM-элемента Создается элемент <div> с классами для типа, темы и расположения, добавляется в контейнер уведомлений страницы.

  2. Применение анимации появления Если задана анимация (animation: { open: 'animated fadeIn', close: 'animated fadeOut' }), она запускается автоматически при показе.

  3. Запуск событий Срабатывают колбэки:

    • onShow — при начале отображения.
    • onShown — после завершения анимации показа.

Пример с событиями:

let notification = new Noty({
    text: 'Данные успешно сохранены!',
    type: 'success',
    layout: 'topRight',
    theme: 'relax',
    callbacks: {
        onShow: function() {
            console.log('Уведомление начало отображаться');
        },
        onShown: function() {
            console.log('Уведомление полностью показано');
        }
    }
});

notification.show();

Повторный вызов show()

Метод show() можно вызывать повторно. В этом случае уведомление:

  • Если скрыто — повторно отображается с анимацией.
  • Если уже показано — игнорирует повторный вызов до завершения скрытия.
notification.show(); // первый вызов
setTimeout(() => {
    notification.show(); // повторный вызов через 2 секунды
}, 2000);

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

Метод show() часто используется вместе с методами close() и setText():

let n = new Noty({ text: 'Загрузка...', type: 'information' });
n.show();

setTimeout(() => {
    n.setText('Загрузка завершена');
    n.show(); // обновленное уведомление снова показывается
}, 2000);

setTimeout(() => {
    n.close(); // скрытие уведомления
}, 5000);

Особенности анимации

Если уведомление создается с настройкой анимации, метод show() автоматически запускает анимацию открытия. Пример с кастомными анимациями:

let n = new Noty({
    text: 'Ошибка сервера!',
    type: 'error',
    layout: 'topCenter',
    animation: {
        open: 'animated bounceInDown', 
        close: 'animated bounceOutUp'
    }
});

n.show();

События жизненного цикла

Метод show() инициирует несколько этапов событий:

  • onShow — уведомление добавлено в DOM, но анимация может быть не завершена.
  • onShown — уведомление полностью показано и готово к взаимодействию.
  • onClose / onClosed — события скрытия уведомления (взаимодействие с show() важно для повторного отображения).

Советы по использованию

  • Для уведомлений с динамическим контентом удобно вызывать show() после изменения текста через setText().
  • Использование show() в сочетании с timeout позволяет создавать автоматические всплывающие сообщения.
  • Для кастомного управления отображением рекомендуется комбинировать show() с событиями onShow и onShown, чтобы синхронизировать внешние действия.

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

Оглавление