Noty

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

Также доступна установка через npm:

npm install noty

После установки можно импортировать библиотеку в проект:

import Noty from 'noty';
import 'noty/lib/noty.css';

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

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

new Noty({
    text: 'Пример уведомления',
    type: 'success',
    timeout: 3000,
    layout: 'topRight',
    theme: 'metroui'
}).show();

Основные параметры:

  • text — текст уведомления.
  • type — тип уведомления: alert, success, error, warning, information.
  • timeout — время отображения в миллисекундах. Если false, уведомление будет оставаться до закрытия вручную.
  • layout — положение на экране: topLeft, topCenter, topRight, bottomLeft, bottomCenter, bottomRight, center.
  • theme — визуальная тема: relax, metroui, mint.

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

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

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

Пример создания уведомления с типом error:

new Noty({
    text: 'Произошла ошибка!',
    type: 'error',
    timeout: 5000,
    layout: 'bottomRight'
}).show();

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

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

  • Верхние позиции: topLeft, topCenter, topRight.
  • Нижние позиции: bottomLeft, bottomCenter, bottomRight.
  • Центральная позиция: center.
new Noty({
    text: 'Центральное уведомление',
    layout: 'center',
    timeout: 4000
}).show();

Настройка тем

Темы управляют визуальным оформлением уведомлений. Noty поставляется с набором встроенных тем, которые можно комбинировать с собственными стилями. Пример использования темы mint:

new Noty({
    text: 'Уведомление с темой mint',
    type: 'information',
    theme: 'mint'
}).show();

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

Кастомизация поведения

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

  • timeout — задержка закрытия уведомления.
  • progressBar — отображение индикатора времени.
  • closeWith — методы закрытия уведомления: click, button, hover.
  • modal — включение модального фона.
  • callbacks — функции, срабатывающие на события: onShow, onClose, onHover.

Пример уведомления с прогресс-баром и кнопкой закрытия:

new Noty({
    text: 'Уведомление с прогресс-баром',
    type: 'success',
    timeout: 4000,
    progressBar: true,
    closeWith: ['button']
}).show();

Работа с очередью уведомлений

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

new Noty({text: 'Первое уведомление', type: 'alert', timeout: 2000}).show();
new Noty({text: 'Второе уведомление', type: 'success', timeout: 2000}).show();

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

  • Noty.closeAll() — закрывает все уведомления.
  • notyInstance.close() — закрывает конкретное уведомление.
  • notyInstance.setText('Новый текст') — обновляет текст существующего уведомления.

Использование кнопок в уведомлениях

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

new Noty({
    text: 'Вы хотите продолжить?',
    type: 'alert',
    buttons: [
        Noty.button('Да', 'btn btn-success', function () {
            console.log('Пользователь согласился');
        }),
        Noty.button('Нет', 'btn btn-error', function () {
            console.log('Пользователь отказался');
        })
    ]
}).show();

Кнопки можно стилизовать через собственные CSS-классы и задавать им произвольные обработчики.

Управление жизненным циклом уведомлений

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

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

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

new Noty({
    text: 'Уведомление с колбэками',
    type: 'information',
    timeout: 3000,
    callbacks: {
        onShow: () => console.log('Уведомление показано'),
        onClose: () => console.log('Уведомление закрыто')
    }
}).show();

Интеграция с фреймворками

Noty легко интегрируется с популярными JavaScript-фреймворками, включая Vue, React и Angular. Для этого достаточно использовать стандартные методы создания уведомлений внутри компонентов и хуков жизненного цикла, обеспечивая реактивность и динамическое обновление уведомлений.

Производительность и оптимизация

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

  • Использование очередей предотвращает перегрузку интерфейса.
  • Асинхронное закрытие уведомлений освобождает ресурсы.
  • Настройка timeout и progressBar позволяет гибко управлять видимостью уведомлений без лишних рендеров.

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

Оглавление