Тема sunset

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

Подключение библиотеки

Для начала необходимо подключить Noty через CDN или npm.

Через 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';
import 'noty/lib/themes/mint.css'; // Можно выбрать любую тему

Создание простого уведомления

Самый базовый способ — это создать объект Noty и вызвать метод show():

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

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

  • type отвечает за визуальный стиль уведомления.
  • theme позволяет выбрать внешний вид.
  • timeout управляет временем жизни уведомления.
  • progressBar добавляет индикатор времени до закрытия.

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

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

new Noty({
    text: 'Верхний правый угол',
    layout: 'topRight', // topLeft, topCenter, bottomLeft, bottomRight, bottomCenter, center
    type: 'success'
}).show();

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

Взаимодействие с пользователем

Noty поддерживает кнопки и пользовательские события.

Пример уведомления с кнопкой:

new Noty({
    text: 'Удалить файл?',
    type: 'warning',
    buttons: [
        Noty.button('Да', 'btn btn-success', function () {
            console.log('Файл удалён');
        }),
        Noty.button('Нет', 'btn btn-error', function (notyInstance) {
            notyInstance.close();
        })
    ]
}).show();

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

  • buttons — массив объектов, каждый создаёт кнопку с текстом, классом и функцией обратного вызова.
  • Можно управлять закрытием уведомления вручную через notyInstance.close().

Анимации появления и скрытия

Noty поддерживает встроенные анимации и кастомные анимации через CSS.

Пример с анимацией:

new Noty({
    text: 'Анимированное уведомление',
    type: 'info',
    animation: {
        open: 'animated bounceInRight', // Анимация появления
        close: 'animated bounceOutLeft' // Анимация закрытия
    }
}).show();

Подсказка: Для использования анимаций типа bounceInRight нужно подключить библиотеку Animate.css.

Управление группами уведомлений

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

let notification = new Noty({
    text: 'Идентифицированное уведомление',
    type: 'alert',
    id: 'uniqueNotification'
}).show();

// Позже можно закрыть по id
Noty.closeAll('#uniqueNotification');

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

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

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

new Noty({ text: 'Использует глобальные настройки' }).show();

Это удобно для унификации всех уведомлений в приложении.

Использование в асинхронных процессах

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

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

Настройка «заката» уведомлений (sunset)

Noty не имеет встроенного параметра с названием «sunset», но эффект постепенного исчезания уведомления реализуется через комбинацию timeout и animation.close.

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

new Noty({
    text: 'Сообщение исчезнет через 5 секунд',
    type: 'info',
    timeout: 5000,
    animation: {
        open: 'animated fadeIn',
        close: 'animated fadeOut'
    }
}).show();

Такой подход создает визуальный эффект sunset, когда уведомление плавно исчезает с экрана.

Расширение функционала

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

Советы по производительности:

  • Не создавать сотни уведомлений одновременно. Использовать стек уведомлений.
  • Для повторяющихся уведомлений — использовать id, чтобы закрывать старые экземпляры.
  • В сложных интерфейсах — объединять Noty с менеджером событий для централизованного контроля уведомлений.
Оглавление