Структура объекта настроек

Библиотека Noty позволяет создавать уведомления в веб-приложениях с гибкой настройкой поведения, внешнего вида и взаимодействия с пользователем. Основой управления уведомлениями является объект настроек, передаваемый при создании экземпляра уведомления через new Noty({ ... }). Этот объект определяет все аспекты уведомления: от типа и текста до позиции на экране и продолжительности отображения.

Основные поля объекта настроек

  1. type Определяет визуальный и смысловой тип уведомления. Возможные значения:

    • 'alert' – базовое уведомление
    • 'success' – уведомление об успешном действии
    • 'error' – сообщение об ошибке
    • 'warning' – предупреждение
    • 'information' – информационное уведомление

    Тип влияет на стилизацию и цветовую схему, что позволяет быстро идентифицировать важность сообщения.

  2. layout Определяет расположение уведомления на экране. Стандартные значения:

    • 'top', 'topLeft', 'topCenter', 'topRight'
    • 'center', 'centerLeft', 'centerRight'
    • 'bottom', 'bottomLeft', 'bottomCenter', 'bottomRight'

    Комбинируя layout с theme, можно достичь согласованного визуального представления уведомлений.

  3. theme Задаёт визуальный стиль уведомления. Noty поставляется с несколькими встроенными темами:

    • 'relax'
    • 'mint'
    • 'sunset'
    • 'metroui' Тема влияет на фон, рамки, шрифты и анимацию уведомления.

  4. text Основное содержимое уведомления. Может быть строкой с HTML-разметкой для форматирования текста или добавления ссылок, кнопок и иконок:

    text: '<strong>Успешно!</strong> Данные сохранены.'

  5. timeout Время отображения уведомления в миллисекундах. Значения:

    • Число (например, 3000 для 3 секунд)
    • false – уведомление не исчезает автоматически, остаётся на экране до закрытия пользователем

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

  6. progressBar Показывает индикатор времени до исчезновения уведомления. Значения:

    • true – отображается индикатор
    • false – индикатор скрыт

    Прогресс-бар визуально помогает пользователю понимать, когда уведомление исчезнет.

  7. animation Настраивает анимацию появления и исчезновения уведомления. Объект animation может содержать поля:

    • open – CSS-анимация появления ('animated bounceInRight')
    • close – CSS-анимация исчезновения ('animated bounceOutRight')
    • easing – тип интерполяции ('swing', 'linear')
    • speed – скорость анимации в миллисекундах

    Пример:

    animation: {
    open: 'animated fadeInDown',
    close: 'animated fadeOutUp',
    easing: 'swing',
    speed: 500
}

  8. killer Булевое значение (true/false). Если true, уведомление закрывает все остальные активные уведомления в том же layout. Используется для уведомлений с высокой приоритетностью.

  9. modal Управляет модальным поведением уведомления. Если true, затемняет фон и предотвращает взаимодействие с другими элементами страницы, пока уведомление активно.

  10. callbacks Позволяет назначать функции-обработчики событий уведомления. Основные события:

    • onShow – при отображении уведомления
    • afterShow – после завершения анимации появления
    • onClose – при запуске закрытия
    • afterClose – после полного скрытия уведомления
    • onHover / onClick – события взаимодействия пользователя

    Пример использования:

    callbacks: {
    onShow: function() { console.log('Уведомление отображено'); },
    afterClose: function() { console.log('Уведомление закрыто'); }
}

Дополнительные параметры

  • dismissQueue – управляет очередью уведомлений. Если true, новые уведомления ставятся в очередь, а не отображаются одновременно.
  • force – принудительное отображение уведомления, игнорируя очередь.
  • id – уникальный идентификатор уведомления. Позволяет ссылаться на конкретное уведомление при динамическом обновлении или закрытии.
  • buttons – массив объектов кнопок, каждая кнопка содержит text, onClick и дополнительные классы для стилизации.

Пример полного объекта настроек

new Noty({
    type: 'success',
    layout: 'topRight',
    theme: 'mint',
    text: '<strong>Готово!</strong> Данные успешно сохранены.',
    timeout: 4000,
    progressBar: true,
    killer: true,
    animation: {
        open: 'animated fadeInRight',
        close: 'animated fadeOutRight',
        easing: 'swing',
        speed: 400
    },
    callbacks: {
        onShow: function() { console.log('Показываем уведомление'); },
        afterClose: function() { console.log('Уведомление закрыто'); }
    }
});

Этот объект демонстрирует полное использование настроек, объединяя тип, тему, позицию, анимацию, тайм-аут и обработку событий. Он служит шаблоном для создания как простых уведомлений, так и сложных интерактивных сообщений.

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

Оглавление