Настройка через параметр layout

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

Доступные значения layout

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

  • top – уведомление появляется в верхней части экрана, по центру.
  • topLeft – верхний левый угол.
  • topRight – верхний правый угол.
  • bottom – нижняя часть экрана, по центру.
  • bottomLeft – нижний левый угол.
  • bottomRight – нижний правый угол.
  • center – центр экрана.
  • inline – вставка уведомления в указанное место DOM, а не поверх контента.

Каждое значение влияет не только на визуальное расположение, но и на поведение уведомлений при появлении нескольких экземпляров: например, уведомления в верхней части экрана будут стекаться вниз, а в нижней – вверх.

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

new Noty({
    text: 'Успешное сохранение данных!',
    type: 'success',
    layout: 'topRight',
    timeout: 3000
}).show();

В этом примере уведомление появится в верхнем правом углу экрана, автоматически исчезнув через 3 секунды.

Кастомизация расположения

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

new Noty({
    text: 'Пользовательское уведомление',
    layout: 'customLayout',
    theme: 'metroui'
}).show();

Для корректного отображения необходимо определить CSS для кастомного layout:

.noty_layout_customLayout {
    position: fixed;
    bottom: 50px;
    right: 100px;
    width: 300px;
}

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

Влияние layout на анимацию

Каждый layout может быть связан с определёнными эффектами анимации появления и скрытия уведомления через параметр animation. Например:

new Noty({
    text: 'Внимание!',
    type: 'alert',
    layout: 'top',
    animation: {
        open: 'animated fadeInDown',
        close: 'animated fadeOutUp'
    }
}).show();

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

Особенности работы с inline layout

layout: 'inline' отличается от остальных тем, что уведомление вставляется в DOM в указанное место, а не фиксируется на экране. Это полезно для уведомлений внутри форм или карточек:

const container = document.querySelector('#notificationContainer');

new Noty({
    text: 'Сообщение внутри формы',
    layout: 'inline',
    container: container,
    type: 'information'
}).show();

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

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

Noty автоматически управляет расположением нескольких уведомлений в пределах одного layout. Можно настроить направление их появления через параметр theme и CSS:

  • В верхней части экрана новые уведомления появляются сверху старых.
  • В нижней части – снизу.
  • Inline-уведомления размещаются в том порядке, в котором добавляются в контейнер.

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

Резюме по layout

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

Оглавление