Загрузка и локальное подключение файлов

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

Локальное подключение

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

  • noty.min.js — основной скрипт библиотеки.
  • noty.css и дополнительные темы (mint.css, relax.css и др.) — стили для уведомлений.

Пример подключения через HTML:

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

Важно подключать стиль темы после основного CSS файла Noty, иначе стили уведомлений могут работать некорректно.

Структура файлов

При локальном подключении рекомендуется сохранять библиотеку в логичной структуре проекта:

project/
│
├─ css/
│   ├─ noty.css
│   └─ themes/
│       ├─ mint.css
│       ├─ relax.css
│       └─ sunset.css
│
└─ js/
    └─ noty.min.js

Это обеспечивает быстрый доступ к различным темам и упрощает обновление библиотеки.

Инициализация уведомлений

После подключения файлов библиотека доступна глобально через объект Noty. Для создания уведомления используется конструктор new Noty(options), где options — объект с конфигурацией.

Пример базового уведомления:

new Noty({
    text: 'Операция выполнена успешно',
    type: 'success',  // Тип: success, error, warning, info, alert
    layout: 'topRight', // Положение уведомления: topRight, topLeft, bottomRight, bottomLeft, topCenter, center
    timeout: 3000,  // Автоматическое скрытие через 3 секунды
}).show();

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

  • text — текст уведомления (строка или HTML).
  • type — тип уведомления, определяющий цвет и иконку.
  • layout — расположение уведомления на странице.
  • theme — тема отображения (mint, relax, sunset и др.).
  • timeout — время автозакрытия, в миллисекундах.
  • progressBar — включение полосы прогресса (true/false).
  • killer — уничтожает все предыдущие уведомления перед показом нового (true/false).

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

Для локальной разработки через Node.js и npm можно установить библиотеку:

npm install noty

Импорт в проекте:

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

Такой способ позволяет интегрировать Noty в модульные системы и сборщики, например Webpack или Vite, обеспечивая оптимизированный бандл.

Использование дополнительных тем и стилей

Каждая тема имеет уникальный стиль и может быть подключена локально через CSS. Чтобы сменить тему:

new Noty({
    text: 'Внимание! Обновление завершено',
    theme: 'relax', // Смена темы
    type: 'info',
}).show();

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

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

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

  • show() — отображение уведомления.
  • close() — закрытие конкретного уведомления.
  • setText(‘новый текст’) — изменение текста на лету.
  • setType(‘тип’) — динамическая смена типа уведомления.

Пример динамического изменения:

let notice = new Noty({
    text: 'Обработка данных...',
    type: 'alert',
    timeout: false,
}).show();

setTimeout(() => {
    notice.setText('Данные успешно загружены');
    notice.setType('success');
    notice.options.timeout = 2000; // Автозакрытие через 2 секунды
}, 3000);

Особенности локального подключения

  1. Автономность — все файлы находятся на сервере проекта, нет зависимости от CDN.
  2. Контроль версий — можно фиксировать версию библиотеки и тем, исключая неожиданные изменения.
  3. Производительность — отсутствие внешних запросов уменьшает время загрузки страницы.
  4. Совместимость с оффлайн-режимом — уведомления будут работать без доступа к интернету.

Локальное подключение позволяет полностью контролировать работу Noty, изменять темы, стили и интегрировать библиотеку в любые веб-приложения без зависимости от внешних ресурсов.

Оглавление