Тема bootstrap-v4

Для использования Noty с Bootstrap 4 необходимо корректно подключить CSS и JS файлы библиотеки. Основной принцип: подключение должно происходить после подключения jQuery и Bootstrap, так как Noty зависит от них для корректной работы и стилизации уведомлений.

Инициализация уведомления выполняется с помощью конструктора new Noty(), в котором указываются ключевые параметры:

new Noty({
    text: 'Сообщение успешно отправлено!',
    type: 'success',
    theme: 'bootstrap-v4',
    layout: 'topRight',
    timeout: 3000,
    progressBar: true,
    closeWith: ['click', 'button'],
}).show();

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

  • text – содержимое уведомления (поддерживается HTML-разметка).
  • type – тип уведомления: alert, success, warning, error, info.
  • theme – тема оформления, для интеграции с Bootstrap 4 используется bootstrap-v4.
  • layout – расположение уведомления на экране: top, topLeft, topCenter, topRight, center, bottom, bottomLeft, bottomCenter, bottomRight.
  • timeout – автоматическое закрытие через заданное время в миллисекундах (0 – уведомление не закрывается автоматически).
  • progressBar – отображение индикатора времени.
  • closeWith – способы закрытия: клик мышью или кнопка закрытия.

Настройка темы Bootstrap 4

Тема bootstrap-v4 использует стандартные классы Bootstrap для визуализации уведомлений. Основные моменты:

  • Типы уведомлений отображаются через классы alert alert-success, alert alert-danger и т. д.
  • Кнопка закрытия (close button) наследует стиль btn-close из Bootstrap 4.
  • Встроенные отступы и границы уведомлений полностью соответствуют сетке и типографике Bootstrap.
new Noty({
    text: 'Ошибка! Произошла ошибка при сохранении данных.',
    type: 'error',
    theme: 'bootstrap-v4',
    layout: 'topRight',
    timeout: 5000,
    progressBar: true,
}).show();

Расширенные возможности

1. Колбэки событий

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

new Noty({
    text: 'Данные обновлены!',
    type: 'info',
    theme: 'bootstrap-v4',
    callbacks: {
        onShow: function() { console.log('Уведомление показано'); },
        onClose: function() { console.log('Уведомление закрыто'); },
    }
}).show();

Основные события:

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

2. Кастомизация кнопок

Можно добавлять кнопки с действиями, например, для подтверждений:

new Noty({
    text: 'Вы уверены, что хотите удалить запись?',
    type: 'warning',
    theme: 'bootstrap-v4',
    layout: 'center',
    modal: true,
    buttons: [
        Noty.button('Да', 'btn btn-danger', function(notyInstance) {
            console.log('Запись удалена');
            notyInstance.close();
        }),
        Noty.button('Отмена', 'btn btn-secondary', function(notyInstance) {
            notyInstance.close();
        })
    ]
}).show();

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

  • Используются стандартные классы Bootstrap для стилизации кнопок (btn, btn-danger, btn-secondary).
  • Возможна передача функции для обработки нажатия.

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

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

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

let queue = [];
queue.push(new Noty({ text: 'Первое уведомление', type: 'info' }));
queue.push(new Noty({ text: 'Второе уведомление', type: 'success' }));

queue.forEach(n => n.show());

Преимущества:

  • Сохраняется единый стиль уведомлений.
  • Обеспечивается последовательное отображение сообщений без наложений.

Интеграция с формами и AJAX

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

$('#myForm').on('submit', function(e) {
    e.preventDefault();
    $.ajax({
        url: '/submit',
        method: 'POST',
        data: $(this).serialize(),
        success: function(response) {
            new Noty({
                text: 'Форма успешно отправлена!',
                type: 'success',
                theme: 'bootstrap-v4',
                layout: 'topRight',
            }).show();
        },
        error: function() {
            new Noty({
                text: 'Ошибка отправки формы!',
                type: 'error',
                theme: 'bootstrap-v4',
                layout: 'topRight',
            }).show();
        }
    });
});

Особенности работы с Bootstrap 4:

  • Совместимость с модальными окнами и сеткой.
  • Возможность использовать уведомления внутри любых контейнеров (.container, .modal-body).

Настройка анимаций

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

new Noty({
    text: 'Появление с эффектом',
    type: 'info',
    theme: 'bootstrap-v4',
    layout: 'topRight',
    animation: {
        open: 'animated fadeInDown', // animate.css классы
        close: 'animated fadeOutUp'
    }
}).show();

Использование animate.css позволяет создавать плавные эффекты появления и исчезновения уведомлений, сохраняя визуальный стиль Bootstrap 4.

Работа с HTML внутри уведомлений

Noty поддерживает HTML-теги, что позволяет создавать сложные уведомления:

new Noty({
    text: 'Внимание! Проверьте профиль для обновлений.',
    type: 'alert',
    theme: 'bootstrap-v4',
    layout: 'bottomLeft',
    timeout: 7000
}).show();

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

  • Можно использовать ссылки, списки, изображения.
  • Все HTML стилизуется через классы Bootstrap 4, включая типографику и цвета текста.
Оглавление