Использование встроенных шаблонов

Встроенные шаблоны в Noty позволяют быстро создавать уведомления с предопределённым стилем, расположением и поведением. Они обеспечивают единообразие интерфейса и упрощают настройку уведомлений для стандартных сценариев, таких как ошибки, предупреждения, успехи или информационные сообщения.

Noty предлагает несколько ключевых типов уведомлений: alert, success, warning, error, info. Каждый из этих типов имеет собственное визуальное оформление и иконографику, которая может быть изменена через CSS.

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

В этом примере используется встроенный шаблон success, который автоматически задаёт зелёный цвет уведомления и соответствующую иконку.

Настройка расположения уведомлений

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

new Noty({
    type: 'error',
    text: 'Произошла ошибка при загрузке данных!',
    layout: 'topRight',
    timeout: 5000
}).show();

Возможные значения layout:

  • top: верхняя центральная часть экрана
  • topLeft: верхний левый угол
  • topRight: верхний правый угол
  • bottom: нижняя центральная часть экрана
  • bottomLeft: нижний левый угол
  • bottomRight: нижний правый угол
  • center: центр экрана

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

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

Noty поддерживает встроенные анимации появления и исчезновения уведомлений через параметры animation.open и animation.close. Встроенные эффекты обеспечивают плавность и современный вид интерфейса:

new Noty({
    type: 'info',
    text: 'Событие запланировано на завтра',
    layout: 'topRight',
    animation: {
        open: 'animated bounceInRight',
        close: 'animated bounceOutRight'
    },
    timeout: 4000
}).show();

Библиотека по умолчанию использует классы Animate.css, но их можно заменить своими анимациями через CSS, задав нужные классы в open и close.

Предопределённые настройки типов уведомлений

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

Noty.overrideDefaults({
    theme: 'metroui',
    timeout: 3000,
    progressBar: true
});

new Noty({
    type: 'warning',
    text: 'Недостаточно прав для выполнения действия'
}).show();

В этом примере все уведомления будут использовать тему metroui, тайм-аут 3 секунды и отображать индикатор прогресса. Можно переопределять эти параметры для отдельного уведомления при необходимости.

Использование шаблонов с кнопками и интерактивностью

Для встроенных шаблонов можно добавлять кнопки действий через buttons. Каждая кнопка описывается массивом [label, callback, className]:

new Noty({
    type: 'alert',
    text: 'Удалить элемент?',
    layout: 'center',
    modal: true,
    buttons: [
        Noty.button('Да', 'btn btn-danger', function () {
            console.log('Элемент удалён');
            this.close();
        }),
        Noty.button('Отмена', 'btn btn-secondary', function () {
            this.close();
        })
    ]
}).show();

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

Применение тем оформления

Noty включает несколько предустановленных тем (mint, metroui, relax и др.), которые задают стили уведомлений по умолчанию. Выбор темы осуществляется через параметр theme:

new Noty({
    type: 'info',
    text: 'Новая версия доступна!',
    theme: 'relax',
    timeout: 5000
}).show();

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

Комбинирование встроенных шаблонов с кастомизацией

Даже при использовании встроенных шаблонов возможна гибкая кастомизация: добавление иконок, изменение цвета текста, использование пользовательских анимаций. Например:

new Noty({
    type: 'success',
    text: '<strong>Файл загружен!</strong>',
    layout: 'topRight',
    theme: 'metroui',
    timeout: 4000,
    progressBar: true,
    animation: {
        open: 'animated fadeInDown',
        close: 'animated fadeOutUp'
    }
}).show();

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

Итоговые возможности встроенных шаблонов

  • Быстрый вызов уведомлений стандартного типа (success, error, warning, info, alert)
  • Предопределённое оформление и иконки
  • Разнообразие позиций (layout) на экране
  • Плавные анимации открытия и закрытия
  • Поддержка модальных уведомлений с кнопками действий
  • Применение тем оформления для единообразного интерфейса
  • Возможность глобальной настройки параметров через Noty.overrideDefaults()

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

Оглавление