Минимальная конфигурация для запуска

Для использования Noty необходимо подключить как CSS, так и JavaScript файлы библиотеки. Существует два способа: через CDN или локально, скачав файлы библиотеки.

Подключение через CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css" />
<script src="https://cdn.jsdelivr.net/npm/noty/lib/noty.min.js"></script>

При подключении локально необходимо разместить файлы noty.css и noty.min.js в проекте и указать соответствующие пути:

<link rel="stylesheet" href="path/to/noty.css" />
<script src="path/to/noty.min.js"></script>

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

Минимальная конфигурация для запуска Noty сводится к созданию объекта Noty с обязательным параметром text.

new Noty({
    text: 'Привет, это уведомление!'
}).show();

Ключевые моменты:

  • text — текст уведомления, обязательный параметр.
  • Метод show() отображает уведомление на странице.

Даже без дополнительных настроек уведомление будет появляться в правом верхнем углу и автоматически исчезать через стандартное время.

Настройка времени отображения

Для контроля времени жизни уведомления используется параметр timeout.

new Noty({
    text: 'Уведомление исчезнет через 3 секунды',
    timeout: 3000
}).show();

Подробности:

  • Значение timeout задается в миллисекундах.
  • Если timeout: false, уведомление останется на экране до ручного закрытия.

Выбор типа уведомления

Noty поддерживает несколько типов уведомлений, которые влияют на стили и иконки: alert, success, error, warning, info.

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

Особенности типов:

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

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

Noty позволяет задавать расположение всплывающих уведомлений через параметр layout.

new Noty({
    text: 'Сообщение внизу страницы',
    layout: 'bottomRight',
    timeout: 2500
}).show();

Доступные значения layout:

  • topLeft, topCenter, topRight
  • bottomLeft, bottomCenter, bottomRight
  • center

Позиционирование работает без дополнительной CSS-настройки, но может быть изменено через кастомные стили при необходимости.

Минимальная кастомизация через тему

Для изменения визуального вида уведомлений можно указать параметр theme. В стандартной сборке доступны темы: mint, sunset, relax, metroui.

new Noty({
    text: 'Сообщение с темой Mint',
    theme: 'mint',
    timeout: 3000
}).show();

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

  • Тема меняет цветовую гамму, тени и шрифты уведомления.
  • Не требует дополнительного подключения CSS, если используется стандартная тема.

Управление событиями

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

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

Важные события:

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

Минимальный рабочий пример

Собрав все элементы вместе, минимальная конфигурация выглядит так:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css" />
<script src="https://cdn.jsdelivr.net/npm/noty/lib/noty.min.js"></script>

<script>
    new Noty({
        text: 'Привет! Это минимальное уведомление Noty.',
        type: 'info',
        layout: 'topRight',
        timeout: 3000,
        theme: 'mint',
        callbacks: {
            onShow: function() { console.log('Уведомление показано'); },
            onClose: function() { console.log('Уведомление закрыто'); }
        }
    }).show();
</script>

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

Оглавление