Обычный текст

Для работы с библиотекой Noty необходимо подключить её CSS и JS-файлы. Можно использовать 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>

Также рекомендуется подключить один из доступных плагинов для темы оформления, например:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/mint.css" />

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

Базовое уведомление создаётся с помощью конструктора Noty. Минимальный пример:

new Noty({
    text: 'Привет, это уведомление!',
    type: 'alert', // тип уведомления: alert, success, error, warning, info
    timeout: 3000, // время автоматического закрытия в миллисекундах
    theme: 'mint', // тема оформления
    layout: 'topRight' // расположение уведомления на экране
}).show();

Ключевые параметры конструктора:

  • text – текст уведомления.
  • type – визуальный стиль и семантика сообщения.
  • timeout – через сколько миллисекунд уведомление закроется автоматически.
  • layout – позиция на экране (top, topLeft, topCenter, topRight, center, bottom, bottomLeft, bottomCenter, bottomRight).
  • theme – оформление: mint, relax, sunset, metroui и др.

Типы уведомлений

Noty поддерживает несколько типов уведомлений:

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

Каждый тип имеет свой цвет и иконку в зависимости от темы.

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

Автоматическое закрытие

timeout определяет время жизни уведомления. Значение false отключает автоматическое закрытие.

new Noty({
    text: 'Это уведомление без тайм-аута',
    timeout: false
}).show();

Закрытие по клику

Можно включить закрытие при клике на уведомление через параметр closeWith:

new Noty({
    text: 'Кликните, чтобы закрыть',
    closeWith: ['click', 'button']
}).show();

closeWith принимает массив из:

  • click – закрытие по клику на уведомление.
  • button – закрытие по кнопке закрытия.
  • hover – закрытие при наведении мыши.

Кнопки действий

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

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

Параметры кнопки:

  • Текст кнопки.
  • CSS-классы для стилизации.
  • Функция обратного вызова с аргументом n – объект уведомления.

Расположение уведомлений

Параметр layout управляет позицией уведомлений:

new Noty({
    text: 'Сообщение в центре',
    layout: 'center'
}).show();

Существующие значения: top, topLeft, topCenter, topRight, center, bottom, bottomLeft, bottomCenter, bottomRight.

Очередь уведомлений

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

Noty.overrideDefaults({
    maxVisible: 3
});

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

Анимации

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

new Noty({
    text: 'С анимацией',
    animation: {
        open: 'animated bounceInRight',
        close: 'animated bounceOutLeft'
    }
}).show();

Можно использовать CSS-анимации из библиотек animate.css или создавать свои классы.

События уведомлений

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

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

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

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

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

Можно изменить параметры по умолчанию для всех уведомлений:

Noty.overrideDefaults({
    theme: 'sunset',
    layout: 'bottomRight',
    timeout: 4000
});

Это удобно для единообразного стиля уведомлений на всем сайте.

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

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

let n = new Noty({ text: 'Загрузка...', type: 'info' }).show();

setTimeout(() => {
    n.setText('Загрузка завершена');
    n.setType('success');
}, 2000);

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

Интеграция с формами и событиями

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

fetch('/api/data')
    .then(res => res.json())
    .then(data => {
        new Noty({ text: 'Данные загружены', type: 'success' }).show();
    })
    .catch(() => {
        new Noty({ text: 'Ошибка загрузки', type: 'error' }).show();
    });

Это обеспечивает наглядную обратную связь пользователю о действиях на странице.

Оглавление