Базовые параметры

Библиотека Noty предназначена для создания уведомлений в браузере с минимальными усилиями. Основой работы является объект Noty, который создаётся через конструктор с конфигурационным объектом.

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

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

text

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

text: 'Загрузка завершена'
text: '<strong>Внимание!</strong> Ошибка при сохранении'

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

type

Определяет тип уведомления, что влияет на его визуальное оформление и иконки. Стандартные значения:

  • alert – базовое уведомление
  • success – уведомление об успешной операции
  • error – уведомление об ошибке
  • warning – предупреждение
  • information – информационное сообщение
type: 'success'

Тип можно динамически изменять через метод setType после создания объекта:

noty.setType('error');

layout

Определяет позицию уведомления на странице. Доступные варианты:

  • top, topLeft, topCenter, topRight
  • center, centerLeft, centerRight
  • bottom, bottomLeft, bottomCenter, bottomRight

Пример расположения в правом верхнем углу:

layout: 'topRight'

layout влияет также на анимацию появления, которая подбирается автоматически под выбранное расположение.

theme

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

  • mint
  • relax
  • metroui
  • sunset

Применение темы:

theme: 'relax'

Темы управляют цветами, шрифтами и тенями, при этом каждая тема может быть дополнительно кастомизирована через CSS.

timeout

Определяет время в миллисекундах, через которое уведомление исчезает автоматически.

  • Значение false блокирует автоматическое закрытие.
  • Значение 0 часто используется для постоянных уведомлений до явного закрытия.
timeout: 5000 // исчезает через 5 секунд
timeout: false // не исчезает автоматически

Для динамического изменения таймаута используется метод setTimeout.

progressBar

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

  • true – включить прогресс-бар
  • false – отключить
progressBar: true

Индикатор управляется автоматически и синхронизирован с параметром timeout.

closeWith

Массив методов закрытия уведомления. Возможные значения:

  • 'click' – клик по уведомлению
  • 'button' – специальная кнопка закрытия
  • 'hover' – при наведении курсора
closeWith: ['click', 'button']

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

callbacks

Позволяют отслеживать жизненный цикл уведомления. Основные события:

  • onShow – при показе уведомления
  • onClose – перед закрытием
  • afterShow – после анимации появления
  • afterClose – после анимации закрытия

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

callbacks: {
    onShow: function() { console.log('Уведомление показано'); },
    onClose: function() { console.log('Уведомление закроется'); }
}

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

buttons

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

buttons: [
    Noty.button('OK', 'btn btn-success', function() {
        console.log('Нажата кнопка OK');
        this.close();
    }),
    Noty.button('Отмена', 'btn btn-danger', function() {
        this.close();
    })
]

Каждая кнопка создаётся через метод Noty.button, который принимает текст, CSS-класс и callback-функцию.

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

new Noty({
    text: 'Скачивание завершено',
    type: 'success',
    layout: 'bottomLeft',
    theme: 'mint',
    timeout: 4000,
    progressBar: true,
    closeWith: ['click', 'button'],
    callbacks: {
        afterShow: function() { console.log('Показано уведомление'); }
    },
    buttons: [
        Noty.button('Открыть', 'btn btn-primary', function() {
            console.log('Файл открыт');
            this.close();
        }),
        Noty.button('Закрыть', 'btn btn-secondary', function() {
            this.close();
        })
    ]
}).show();

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

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

Оглавление