Позиционирование Notification

В библиотеке Ant Design компонент Notification используется для отображения уведомлений в веб-приложениях. Гибкая настройка его позиции на экране позволяет создавать удобный и интуитивно понятный интерфейс для пользователя. Позиционирование уведомлений реализуется через свойство placement, которое задаёт место отображения всплывающих сообщений.

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

Свойство placement принимает следующие значения:

topLeft – уведомление отображается в верхнем левом углу экрана.
topRight – уведомление отображается в верхнем правом углу экрана (значение по умолчанию).
bottomLeft – уведомление отображается в нижнем левом углу экрана.
bottomRight – уведомление отображается в нижнем правом углу экрана.

Пример базового использования с указанием позиции:

import { notification, Button } from 'antd';

const openNotification = () => {
  notification.open({
    message: 'Информация',
    description: 'Уведомление отображается в верхнем левом углу',
    placement: 'topLeft',
  });
};

В данном примере уведомление будет появляться в верхнем левом углу, благодаря свойству placement: 'topLeft'.

Глобальная установка позиции

Если требуется задать одну и ту же позицию для всех уведомлений в приложении, можно использовать метод notification.config:

notification.config({
  placement: 'bottomRight',
  duration: 3, // время отображения в секундах
});

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

Важно: метод notification.config позволяет не только задавать позицию, но и управлять другими параметрами уведомлений: временем отображения (duration), смещением от края экрана (top, bottom) и стилем (rtl).

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

Для более точного позиционирования можно использовать свойства top и bottom, задающие расстояние уведомления от верхнего или нижнего края окна:

notification.config({
  placement: 'topRight',
  top: 50, // отступ от верхнего края
  duration: 5,
});

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

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

При отображении нескольких уведомлений одновременно, Ant Design автоматически располагает их стопкой, начиная с указанного края экрана. Для верхних позиций (topLeft, topRight) новые уведомления появляются сверху, а для нижних (bottomLeft, bottomRight) – снизу.

notification.open({
  message: 'Первое уведомление',
  placement: 'bottomLeft',
});

notification.open({
  message: 'Второе уведомление',
  placement: 'bottomLeft',
});

На экране уведомления будут отображены друг над другом в нижнем левом углу, начиная с нижней границы.

Комбинирование с другими настройками

Позицию уведомлений можно комбинировать с различными типами уведомлений (success, info, warning, error) для создания визуально различимых сообщений. Например:

notification.success({
  message: 'Операция успешна',
  description: 'Данные сохранены',
  placement: 'topRight',
});

notification.error({
  message: 'Ошибка',
  description: 'Произошла ошибка при сохранении данных',
  placement: 'topRight',
});

Оба уведомления будут появляться в верхнем правом углу, при этом их визуальные стили различаются.