Тема nest

Noty — это лёгкая и гибкая библиотека для отображения уведомлений в браузере на JavaScript. Для начала работы необходимо подключить библиотеку к проекту. Существует несколько способов:

Через npm:

npm install noty

Через 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>

После подключения CSS и JS можно создавать уведомления напрямую из кода.

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

Объект Noty создаётся с использованием конструктора, где указываются основные параметры уведомления:

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

Ключевые параметры:

  • text — текст уведомления.
  • type — визуальный стиль иконки и цвета.
  • timeout — время отображения. Если значение false, уведомление останется до закрытия вручную.
  • layout — положение уведомления на странице.
  • theme — стилизация, влияет на внешний вид.

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

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

  1. alert — стандартное уведомление без специальных иконок.
  2. success — зелёное уведомление, сигнализирующее об успешной операции.
  3. error — красное уведомление об ошибке.
  4. warning — жёлтое предупреждение.
  5. info — синее информационное уведомление.

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

new Noty({text: 'Операция выполнена', type: 'success'}).show();
new Noty({text: 'Произошла ошибка', type: 'error'}).show();
new Noty({text: 'Обратите внимание', type: 'warning'}).show();
new Noty({text: 'Информация', type: 'info'}).show();

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

Параметр layout позволяет размещать уведомления в разных частях страницы. Основные значения:

  • topLeft
  • topCenter
  • topRight
  • bottomLeft
  • bottomCenter
  • bottomRight
  • center — по центру экрана
new Noty({
    text: 'Уведомление по центру',
    layout: 'center',
    type: 'info'
}).show();

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

Автозакрытие и управление временем отображения

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

let notification = new Noty({
    text: 'Это уведомление останется, пока не закроете',
    timeout: false
}).show();

// Закрытие вручную
setTimeout(() => {
    notification.close();
}, 5000);

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

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

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 — при наведении мыши.
  • onTimeout — при автозакрытии.

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

new Noty({
    text: 'Наведи курсор, чтобы увидеть действие',
    type: 'info',
    callbacks: {
        onHover: function() {
            console.log('Курсор наведен на уведомление');
        },
        onClose: function() {
            console.log('Уведомление закрыто');
        }
    }
}).show();

Темы и стилизация

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

  • mint
  • metroui
  • relax
  • sunset
  • nest — современная тема с акцентом на контрастные цвета и плавные анимации.

Выбор темы задаётся через параметр theme при создании уведомления:

new Noty({
    text: 'Тема Nest',
    type: 'success',
    theme: 'nest'
}).show();

Также можно полностью кастомизировать внешний вид через CSS, создавая свои стили и переопределяя базовые классы .noty_body, .noty_bar, .noty_type_* и .noty_theme_*.

Управление очередью уведомлений

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

  • queue — определяет, использовать ли стандартную очередь.
  • maxVisible — количество одновременно видимых уведомлений.
Noty.overrideDefaults({
    layout: 'topRight',
    maxVisible: 3
});

new Noty({text: 'Первое уведомление'}).show();
new Noty({text: 'Второе уведомление'}).show();
new Noty({text: 'Третье уведомление'}).show();
new Noty({text: 'Четвёртое уведомление'}).show(); // появится после закрытия предыдущего

Анимации уведомлений

Noty позволяет задавать эффекты появления и скрытия уведомления с помощью CSS или встроенных классов. Основные встроенные анимации:

  • fade
  • slide
  • bounce
  • zoom

Пример:

new Noty({
    text: 'С анимацией появления',
    type: 'info',
    animation: {
        open: 'animated bounceInRight',
        close: 'animated bounceOutRight'
    }
}).show();

Анимации можно подключать через библиотеки вроде Animate.css для расширенной визуализации.

Группировка и повторное использование уведомлений

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

let notification = new Noty({
    text: 'Ожидание...',
    type: 'info',
    id: 'loading-noty',
    timeout: false
}).show();

// Позже можно обновить текст и тип
Noty.get('loading-noty').setText('Готово!').setType('success').close();

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

Оглавление