Комбинирование позиций

Библиотека Noty позволяет гибко управлять положением уведомлений на странице, задавая его через параметр layout. Значения по умолчанию включают: top, topLeft, topRight, bottom, bottomLeft, bottomRight, center, centerLeft, centerRight. Каждое уведомление создаётся как отдельный DOM-элемент, добавляемый в контейнер, соответствующий выбранному расположению.

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

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

Одновременное использование нескольких позиций

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

new Noty({
    text: 'Верхний левый угол',
    layout: 'topLeft',
    type: 'info'
}).show();

new Noty({
    text: 'Нижний правый угол',
    layout: 'bottomRight',
    type: 'warning'
}).show();

Группировка уведомлений внутри одной позиции

Уведомления, находящиеся в одном контейнере, автоматически выстраиваются в очередь. Можно контролировать порядок появления с помощью параметра queue. По умолчанию уведомления добавляются в конец очереди, но при использовании queue: 'override' новые уведомления заменяют старые.

new Noty({
    text: 'Перезаписываю старое уведомление',
    layout: 'topRight',
    type: 'alert',
    queue: 'override'
}).show();

Настройка отступов и внутренних смещений

Noty предоставляет возможность тонкой настройки позиции уведомления через CSS, а также с помощью параметров theme и container. Отступы между уведомлениями управляются через margin контейнера, что позволяет создавать аккуратные группы уведомлений без наложений.

.noty_container.topRight {
    margin-top: 20px;
    margin-right: 20px;
}
.noty {
    margin-bottom: 10px;
}

Комбинирование горизонтальных и вертикальных позиций

Можно комбинировать горизонтальные и вертикальные позиции для создания нестандартных схем размещения. Например, использование centerLeft и centerRight позволяет разместить уведомления симметрично по бокам экрана. Для таких случаев важно учитывать размеры контейнера, чтобы уведомления не выходили за пределы видимой области.

new Noty({
    text: 'Слева по центру',
    layout: 'centerLeft',
    type: 'success'
}).show();

new Noty({
    text: 'Справа по центру',
    layout: 'centerRight',
    type: 'success'
}).show();

Управление последовательностью и временем отображения

Для сложных интерфейсов, где уведомления появляются одновременно в нескольких позициях, важно контролировать время отображения (timeout) и анимации (animation). Noty позволяет настраивать вход и выход уведомления через объекты animation.open и animation.close, а также задавать индивидуальное время показа для каждой позиции.

new Noty({
    text: 'Анимированное уведомление',
    layout: 'bottomLeft',
    type: 'info',
    timeout: 5000,
    animation: {
        open: 'animated bounceInLeft',
        close: 'animated bounceOutLeft'
    }
}).show();

Динамическое управление контейнерами

Можно создавать уведомления динамически, изменяя их позицию в зависимости от контекста. Например, ошибки могут появляться справа сверху, информационные сообщения — слева снизу. Для этого используется динамическое присваивание layout при создании экземпляра Noty.

function showNotification(type, message) {
    let layout = type === 'error' ? 'topRight' : 'bottomLeft';
    new Noty({
        text: message,
        layout: layout,
        type: type,
        timeout: 4000
    }).show();
}

showNotification('error', 'Произошла ошибка!');
showNotification('info', 'Операция завершена.');

Совмещение с пользовательскими стилями

При комбинировании уведомлений важно учитывать пользовательские темы. Noty поддерживает кастомные темы через CSS. Каждое уведомление можно адаптировать под конкретный контейнер, задавая разные стили для topRight, bottomLeft и других позиций. Это позволяет создавать визуально согласованные интерфейсы с множественными зонами уведомлений.

.noty.topRight {
    background-color: #f0ad4e;
}
.noty.bottomLeft {
    background-color: #5bc0de;
}

Практические рекомендации

  • Использовать отдельные контейнеры для разных типов уведомлений.
  • Настраивать отступы, чтобы уведомления не перекрывали друг друга.
  • Контролировать очередь и время отображения для каждой позиции.
  • Применять индивидуальные анимации для каждой зоны, чтобы улучшить восприятие.
  • Использовать кастомные темы для визуальной гармонии.

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

Оглавление