Центральные позиции

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

Основные позиции по центру

Noty предоставляет следующие значения для центрального размещения:

  • center – уведомление размещается строго по центру экрана, как по горизонтали, так и по вертикали.
  • topCenter – уведомление закрепляется в верхней части окна, по центру по горизонтали.
  • bottomCenter – уведомление фиксируется в нижней части окна, выравниваясь по центру по горизонтали.

Эти позиции определяются через опцию layout при создании экземпляра уведомления:

new Noty({
    text: 'Сообщение в центре экрана',
    type: 'info',
    layout: 'center',
    theme: 'mint',
    timeout: 3000
}).show();

Влияние на пользовательский опыт

Центральные позиции особенно полезны для:

  • Важных системных уведомлений (например, ошибки или подтверждение действий).
  • Модальных подсказок, где требуется немедленное внимание пользователя.
  • Сообщений с ограниченным временем показа, чтобы они были заметны независимо от прокрутки страницы.

Размещение по центру предотвращает потерю уведомления среди других элементов интерфейса и обеспечивает максимальную визуальную заметность.

Настройка смещения

Помимо стандартных центров, Noty позволяет настроить отступы по горизонтали и вертикали через CSS или через кастомные темы. Для тонкой настройки можно использовать CSS-класс .noty_body и переопределять свойства top, bottom, left, transform:

.noty_layout_center {
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Это позволяет сдвинуть уведомление вверх или вниз, сохраняя горизонтальное выравнивание по центру.

Особенности анимации и адаптивности

  • Анимации в центральных позициях работают одинаково, как при верхних и нижних позициях, включая эффекты fade, slide, bounce.
  • На мобильных устройствах или при изменении размеров окна браузера уведомления автоматически пересчитывают своё положение, оставаясь по центру экрана.

Для плавного отображения можно использовать опцию animation:

new Noty({
    text: 'Центральное уведомление с анимацией',
    type: 'success',
    layout: 'topCenter',
    theme: 'sunset',
    animation: {
        open: 'animated fadeInDown',
        close: 'animated fadeOutUp'
    }
}).show();

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

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

  • maxVisible определяет максимальное количество уведомлений на экране.
  • Если новые уведомления появляются, а лимит достигнут, старые уведомления либо исчезают, либо сдвигаются вниз или вверх, в зависимости от позиции.
Noty.overrideDefaults({
    layout: 'bottomCenter',
    maxVisible: 3
});

Вывод

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

Оглавление