Типы данных

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

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

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

new Noty({
    type: 'success',
    layout: 'topRight',
    text: 'Операция успешно выполнена',
    timeout: 3000,
    progressBar: true,
    theme: 'mint'
}).show();

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

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

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

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

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

Каждый тип может иметь свой цвет, иконку и эффекты анимации. Эти параметры можно настроить через кастомные CSS-классы и темы.

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

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

new Noty({
    layout: 'bottomLeft',
    text: 'Сообщение внизу слева'
}).show();

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

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

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

Noty предоставляет возможность кастомизации анимации с помощью параметров animation:

new Noty({
    text: 'Пример анимации',
    animation: {
        open: 'animated bounceInRight', // Animate.css класс для открытия
        close: 'animated bounceOutLeft'
    }
}).show();

Поддерживаются стандартные CSS-анимации, а также собственные анимации, добавляемые через CSS или JavaScript.

Автозакрытие и прогресс-бар

timeout управляет временем жизни уведомления. Если необходимо, уведомление можно сделать постоянным:

new Noty({
    text: 'Требуется закрытие вручную',
    timeout: false
}).show();

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

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

Обработка событий

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

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

Пример:

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

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

Noty позволяет создавать несколько уведомлений одновременно. Библиотека автоматически выстраивает их в стек в соответствии с layout. Для удаления всех уведомлений можно использовать метод Noty.closeAll():

Noty.closeAll();

Кастомизация темы и стиля

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

.my-custom-theme .noty_bar {
    background-color: #4CAF50;
    color: #fff;
    font-weight: bold;
}

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

new Noty({
    text: 'Кастомная тема',
    theme: 'my-custom-theme'
}).show();

Асинхронные уведомления

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

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

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

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

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

Итоговые рекомендации по использованию

  • Использовать разные типы уведомлений для четкой визуальной коммуникации с пользователем.
  • Настраивать timeout и progressBar для уведомлений разной важности.
  • Применять кастомные темы и анимации для гармоничного интегрирования в интерфейс.
  • Обрабатывать события уведомлений для взаимодействия с пользовательскими действиями.

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

Оглавление