Отображение и закрытие уведомления

Для создания уведомлений в Noty используется конструктор Noty, принимающий объект конфигурации. Основные свойства:

new Noty({
    text: 'Сообщение уведомления',
    type: 'success', // success, alert, warning, error, information
    layout: 'topRight', // top, topLeft, topCenter, topRight, center, centerLeft, centerRight, bottom, bottomLeft, bottomCenter, bottomRight
    theme: 'metroui', // light, metroui, mint, sunset и др.
    timeout: 3000, // время автоматического закрытия в миллисекундах
    progressBar: true, // отображение индикатора времени
}).show();
  • text — текст уведомления, может содержать HTML.
  • type — визуальное оформление уведомления, меняет цвет и иконку.
  • layout — позиция уведомления на экране, определяет, где оно будет появляться.
  • theme — тема, влияющая на стилизацию, шрифты и отступы.
  • timeout — автоматическое закрытие через заданное время; если значение false, уведомление закрывается только вручную.
  • progressBar — визуальная шкала, показывающая оставшееся время до закрытия.

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

Закрытие уведомлений

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

  1. Автоматическое закрытие по таймеру Настройка timeout обеспечивает закрытие без вмешательства пользователя.

    new Noty({text: 'Автозакрытие через 2 секунды', timeout: 2000}).show();

  2. Закрытие программно через метод .close() Позволяет закрыть уведомление в любой момент:

    let notification = new Noty({text: 'Закрытие вручную'});
notification.show();

setTimeout(() => {
    notification.close();
}, 5000);

  3. Закрытие по действию пользователя Можно добавить кнопки для управления уведомлением:

    new Noty({
    text: 'Вы хотите закрыть уведомление?',
    buttons: [
        Noty.button('Да', 'btn btn-success', function(n) { n.close(); }),
        Noty.button('Нет', 'btn btn-error', function(n) { console.log('Отмена'); })
    ]
}).show();

  4. Закрытие всех уведомлений сразу Метод Noty.closeAll() завершает все активные уведомления:

    Noty.closeAll();

Обработка событий при закрытии

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

  • onShow — срабатывает при отображении.
  • onClose — срабатывает при закрытии.
  • onClick — срабатывает при клике на уведомление.

Пример с обработкой закрытия:

new Noty({
    text: 'Закрытие уведомления с событием',
    timeout: 4000,
    callbacks: {
        onClose: function() {
            console.log('Уведомление закрыто');
        }
    }
}).show();

Настройка анимаций

Noty поддерживает встроенные анимации при появлении и скрытии уведомлений через свойства animation:

new Noty({
    text: 'С анимацией',
    animation: {
        open: 'animated bounceInRight', // анимация появления
        close: 'animated bounceOutRight' // анимация закрытия
    }
}).show();

Используются CSS-классы из animate.css или собственные стили. Анимации делают уведомления более заметными и плавными.

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

Если на странице появляется несколько уведомлений, Noty автоматически формирует стек. Параметры для управления:

  • maxVisible — максимальное количество уведомлений одновременно:
new Noty({text: 'Тест', maxVisible: 3}).show();
  • queue — уведомления добавляются в очередь, если лимит видимых уведомлений превышен.

Динамическое обновление уведомления

Текст или тип уведомления можно изменять после создания:

let n = new Noty({text: 'Исходный текст', type: 'information'}).show();
setTimeout(() => {
    n.setText('Новый текст');
    n.setType('success');
}, 2000);

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

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

  • Использовать timeout для кратких уведомлений, чтобы не отвлекать пользователя.
  • Для критических сообщений применять кнопки и ручное закрытие.
  • Вложенные уведомления следует контролировать через maxVisible, чтобы избежать перегрузки интерфейса.
  • Для корпоративных приложений полезно стандартизировать type и theme для единообразного визуального стиля.

Noty сочетает гибкость настройки, управление событиями и плавные анимации, делая уведомления удобными как для кратких сообщений, так и для интерактивных действий.

Оглавление