Настройка defaults

Библиотека Noty предоставляет гибкую систему уведомлений для веб-приложений, позволяя быстро создавать всплывающие сообщения с настраиваемым поведением. Одним из ключевых инструментов управления уведомлениями является объект defaults, который позволяет задавать глобальные параметры для всех создаваемых уведомлений.

Основные возможности defaults

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

Ключевые свойства:

  • theme – тема уведомления. Возможные значения: "mint", "relax", "metroui", "sunset", "nest". Эта настройка определяет внешний вид уведомлений и их анимации.

  • layout – расположение уведомления на экране. Стандартные варианты: "top", "topLeft", "topRight", "bottom", "bottomLeft", "bottomRight", "center".

  • timeout – время в миллисекундах, через которое уведомление автоматически закроется. Значение false отключает авто-закрытие.

  • progressBar – отображение полосы прогресса авто-закрытия (true/false).

  • closeWith – массив событий, с помощью которых можно закрыть уведомление. Возможные значения: "click", "button", "hover".

  • animation – объект с параметрами анимации появления и скрытия:

    animation: {
    open: 'animated bounceInRight',
    close: 'animated bounceOutRight'
}

  • force – принудительное отображение уведомления поверх других элементов (true/false).

  • modal – делает уведомление модальным (true/false), блокируя взаимодействие с остальными элементами страницы.

  • id – уникальный идентификатор уведомления, полезный для управления конкретными уведомлениями.

  • maxVisible – максимальное количество одновременно видимых уведомлений.

  • killer – если значение true, новые уведомления удаляют все текущие уведомления на экране.

Пример глобальной настройки defaults

Чтобы задать глобальные параметры для всех уведомлений в приложении:

Noty.overrideDefaults({
    theme: 'sunset',
    layout: 'topRight',
    timeout: 5000,
    progressBar: true,
    closeWith: ['click', 'button'],
    animation: {
        open: 'animated fadeInDown',
        close: 'animated fadeOutUp'
    },
    killer: false
});

После вызова Noty.overrideDefaults() все новые уведомления будут использовать указанные параметры, если явно не переопределить их при создании конкретного уведомления.

Локальная переопределяемость defaults

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

new Noty({
    text: 'Сообщение с индивидуальными настройками',
    timeout: 10000, // переопределяет глобальные 5000
    layout: 'bottomLeft' // изменяет расположение
}).show();

Важные нюансы при работе с defaults

  • Порядок применения настроек: глобальные defaults применяются только в том случае, если при создании уведомления не заданы локальные параметры.
  • Анимации: библиотека поддерживает интеграцию с библиотеками анимации, такими как Animate.css. При изменении defaults важно, чтобы классы анимаций были корректно подключены.
  • Модификация после создания: defaults можно изменять динамически в процессе работы приложения, используя Noty.overrideDefaults(), что позволяет адаптировать уведомления к разным разделам или темам интерфейса.

Полезные комбинации defaults

  1. Модальные уведомления с кнопкой закрытия:
Noty.overrideDefaults({
    modal: true,
    closeWith: ['button'],
    theme: 'mint'
});
  1. Информационные уведомления без автозакрытия:
Noty.overrideDefaults({
    timeout: false,
    layout: 'top',
    progressBar: false
});
  1. Максимальное количество уведомлений на экране:
Noty.overrideDefaults({
    maxVisible: 3,
    killer: true
});

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

Вывод

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

Оглавление