Позиционирование уведомлений

В библиотеке Naive UI уведомления реализуются через компонент n-notification и соответствующие методы API, такие как notification.info(), notification.success(), notification.warning() и notification.error(). Одной из ключевых особенностей уведомлений является их позиционирование на экране, которое задаёт удобство восприятия и не мешает основному интерфейсу.

Типы позиций уведомлений

Naive UI предоставляет гибкую систему позиционирования с помощью свойства position. Оно позволяет указать, где на экране будет отображаться уведомление. Доступные варианты:

  • top-left — верхний левый угол экрана
  • top — верхний центр экрана
  • top-right — верхний правый угол экрана
  • bottom-left — нижний левый угол экрана
  • bottom — нижний центр экрана
  • bottom-right — нижний правый угол экрана

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

Настройка позиции через API

При вызове уведомления через методы API позицию можно указать в объекте параметров:

import { createDiscreteApi } from 'naive-ui'

const { notification } = createDiscreteApi(['notification'])

notification.success({
  title: 'Успешно',
  content: 'Операция выполнена',
  position: 'bottom-left'
})

Здесь свойство position: 'bottom-left' определяет, что уведомление будет отображаться в нижнем левом углу экрана. При этом можно вызывать несколько уведомлений с разными позициями, чтобы распределять их по интерфейсу.

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

Naive UI автоматически группирует уведомления, которые имеют одинаковую позицию. Это позволяет создавать аккуратный стек уведомлений в одном месте экрана. Порядок появления новых уведомлений зависит от позиции:

  • Для верхних позиций (top-left, top, top-right) новые уведомления добавляются сверху стека.
  • Для нижних позиций (bottom-left, bottom, bottom-right) новые уведомления добавляются снизу стека.

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

Управление количеством одновременно отображаемых уведомлений

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

notification.info({
  title: 'Информация',
  content: 'Это уведомление',
  position: 'top-right',
  max: 3
})

Если в стеке уже находится три уведомления, то при появлении четвёртого будет удалено самое старое. Такой механизм предотвращает переполнение экрана и поддерживает аккуратное отображение уведомлений.

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

Свойство offset позволяет задать отступ уведомления от краев экрана. Оно принимает значение в пикселях:

notification.warning({
  title: 'Предупреждение',
  content: 'Нужно проверить данные',
  position: 'top',
  offset: 50
})

В этом примере уведомление будет отображаться 50 пикселей ниже верхнего края экрана. Использование offset полезно для интерфейсов с фиксированными шапками или панелями, чтобы уведомления не перекрывали основной контент.

Динамическое позиционирование

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

const element = document.querySelector('#button')
const rect = element.getBoundingClientRect()

notification.success({
  title: 'Успешно',
  content: 'Кнопка была нажата',
  position: 'top-left',
  offset: rect.bottom + 10
})

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

Использование нескольких стеков уведомлений

Naive UI позволяет одновременно использовать несколько независимых стеков уведомлений с разными позициями. Для этого создаётся отдельный API через createDiscreteApi и указывается нужная позиция:

const { notification: topRightNotification } = createDiscreteApi(['notification'])
const { notification: bottomLeftNotification } = createDiscreteApi(['notification'])

topRightNotification.success({ title: 'Верхний правый' })
bottomLeftNotification.info({ title: 'Нижний левый' })

Это позволяет строить интерфейсы с параллельными потоками уведомлений, например, системные и пользовательские сообщения, каждый в своей области экрана.

Особенности адаптивного отображения

При использовании Naive UI на разных устройствах стоит учитывать:

  • На мобильных устройствах верхние уведомления обычно перекрывают меньше контента, чем нижние, поэтому позиция top предпочтительнее.
  • Для широких экранов можно использовать угловые позиции (top-left, top-right), чтобы уведомления не мешали центральной области интерфейса.
  • Свойства offset и max позволяют адаптировать количество уведомлений и их расположение под любые размеры экрана.

Практическая рекомендация по позиционированию

  • Системные уведомления лучше размещать в правом верхнем углу (top-right), так как они не отвлекают пользователя от основного контента.
  • Ошибки и предупреждения, связанные с конкретными формами или действиями пользователя, могут использовать нижние позиции (bottom-left, bottom-right) для большей заметности.
  • Использование центральных позиций (top, bottom) оправдано при глобальных уведомлениях, которые требуют внимания независимо от контекста.

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

Оглавление