Верхние позиции

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

Ключевые параметры уведомлений:

  • text — текст уведомления, обязательный параметр.
  • type — тип уведомления: alert, success, warning, error, information. Определяет цветовую схему и иконку.
  • layout — позиция на экране: top, topLeft, topCenter, topRight, center, centerLeft, centerRight, bottom, bottomLeft, bottomCenter, bottomRight.
  • theme — визуальная тема: relax, mint, metroui, sunset и другие.
  • timeout — время в миллисекундах, через которое уведомление автоматически исчезает.
  • progressBar — отображение индикатора времени до исчезновения (true/false).
  • killer — параметр, который закрывает все остальные уведомления на экране при появлении нового.

Пример создания базового уведомления:

new Noty({
    text: 'Операция выполнена успешно',
    type: 'success',
    layout: 'topRight',
    theme: 'metroui',
    timeout: 3000,
    progressBar: true
}).show();

Позиционирование уведомлений

Noty поддерживает детальное управление позиционированием уведомлений. Основные позиции на верхней части экрана:

  • top — уведомление появляется в верхней части экрана по центру.
  • topLeft — в левом верхнем углу.
  • topCenter — в центре верхней части экрана.
  • topRight — в правом верхнем углу.

Позиция задается через параметр layout при создании уведомления. Для управления несколькими уведомлениями на одной позиции можно использовать queue и maxVisible.

new Noty({
    text: 'Предупреждение о заполнении формы',
    type: 'warning',
    layout: 'topCenter',
    theme: 'sunset',
    timeout: 5000
}).show();

Типы уведомлений и их визуальные особенности

Каждый тип уведомления имеет стандартные цветовые схемы:

  • alert — серый фон, используется для информационных сообщений.
  • success — зеленый, сигнализирует об успешной операции.
  • warning — желтый, для предупреждений.
  • error — красный, для ошибок или критических событий.
  • information — синий, для нейтральных информационных сообщений.

Тип задается через параметр type. Можно комбинировать его с кастомными стилями через theme или собственные CSS-классы.

Пользовательские кнопки и колбеки

Noty позволяет добавлять кнопки в уведомления для интерактивного взаимодействия. Параметр buttons принимает массив объектов с text, onClick и addClass.

new Noty({
    text: 'Сохранить изменения?',
    type: 'alert',
    layout: 'topRight',
    theme: 'mint',
    timeout: false,
    buttons: [
        Noty.button('Да', 'btn btn-success', function () {
            console.log('Изменения сохранены');
        }),
        Noty.button('Нет', 'btn btn-error', function () {
            this.close();
        })
    ]
}).show();

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

  • onShow — срабатывает при показе уведомления.
  • onClose — при закрытии.
  • afterShow — после анимации показа.
  • afterClose — после завершения анимации закрытия.

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

new Noty({
    text: 'Загрузка данных завершена',
    type: 'information',
    layout: 'topLeft',
    theme: 'relax',
    timeout: 3000,
    callbacks: {
        onShow: function() {
            console.log('Уведомление показано');
        },
        onClose: function() {
            console.log('Уведомление закрыто');
        }
    }
}).show();

Управление несколькими уведомлениями

Для контроля количества уведомлений на экране можно использовать:

  • killer — закрывает все предыдущие уведомления при появлении нового.
  • maxVisible — ограничение количества видимых уведомлений в очереди.
new Noty({
    text: 'Новое уведомление',
    type: 'success',
    layout: 'topRight',
    theme: 'metroui',
    killer: true
}).show();

Анимации и темы

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

  • relax — мягкая анимация и светлые цвета.
  • metroui — современный минимализм, четкие линии.
  • sunset — теплые тона, плавные анимации.
  • mint — свежие зеленые оттенки, акцент на интерактивные элементы.

Анимации можно менять через CSS или подключать дополнительные классы, добавляя динамику к уведомлениям.

Настройка глобальных параметров

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

Noty.overrideDefaults({
    layout: 'topRight',
    theme: 'mint',
    timeout: 4000,
    progressBar: true
});

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

Вывод

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

Оглавление