Notification

Компонент Notification в библиотеке Ant Design используется для отображения всплывающих уведомлений, которые информируют пользователя о событиях приложения. В отличие от message, уведомления Notification поддерживают более сложное содержание, включая заголовки, описание и кнопки действий.

import { notification, Button } from 'antd';

const openNotification = () => {
  notification.open({
    message: 'Заголовок уведомления',
    description:
      'Подробное описание уведомления, которое может занимать несколько строк и объяснять ситуацию более подробно.',
    onClick: () => {
      console.log('Уведомление было кликнуто!');
    },
  });
};

Ключевые параметры метода notification.open:

  • message – заголовок уведомления (обязательный).
  • description – текст уведомления, может быть многострочным.
  • icon – кастомная иконка, может быть любым React-элементом.
  • placement – расположение уведомления на экране (topLeft, topRight, bottomLeft, bottomRight).
  • duration – время автоматического закрытия в секундах. Если указать 0, уведомление останется до явного закрытия.
  • onClose – функция, вызываемая при закрытии уведомления.
  • onClick – функция, вызываемая при клике на уведомление.

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

Ant Design поддерживает несколько стандартных типов уведомлений: success, info, warning, error. Эти методы облегчают создание уведомлений с соответствующей стилизацией:

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

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

notification.warning({
  message: 'Внимание',
  description: 'Необходимо обратить внимание на это уведомление.',
});

notification.info({
  message: 'Информация',
  description: 'Это информационное уведомление для пользователя.',
});

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

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

notification.info({
  message: 'Уведомление в левом нижнем углу',
  description: 'Пример кастомного расположения уведомления.',
  placement: 'bottomLeft',
});

Управление временем жизни уведомления

Уведомления могут автоматически закрываться через определённое время, задаваемое в duration (секунды).

notification.open({
  message: 'Временное уведомление',
  description: 'Закроется через 5 секунд.',
  duration: 5,
});

Если требуется, чтобы уведомление оставалось на экране до явного закрытия, следует указать duration: 0:

notification.open({
  message: 'Постоянное уведомление',
  description: 'Это уведомление нужно закрыть вручную.',
  duration: 0,
});

Использование иконок и кастомного контента

Можно добавлять кастомные иконки, кнопки или даже JSX-компоненты в описание уведомления:

import { SmileOutlined } from '@ant-design/icons';

notification.open({
  message: 'Пользовательское уведомление',
  description: (
    <div>
      <p>Это уведомление с кастомным JSX содержимым.</p>
      <Button type="primary" onCl ick={() => console.log('Действие выполнено')}>
        Выполнить действие
      </Button>
    </div>
  ),
  icon: <SmileOutlined style={{ color: '#108ee9' }} />,
});

Программное управление уведомлениями

Все уведомления управляются глобально через объект notification. Для закрытия уведомления используется метод close, а для закрытия всех уведомлений — destroy:

// Закрыть конкретное уведомление
const key = `open${Date.now()}`;
notification.open({
  message: 'Закрываемое уведомление',
  key,
});
notification.close(key);

// Закрыть все уведомления
notification.destroy();

Глобальная конфигурация Notification

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

notification.config({
  duration: 3,
  placement: 'topRight',
  bottom: 50,
  top: 50,
  rtl: false,
});

Параметры конфигурации:

  • duration – время жизни уведомления по умолчанию.
  • placement – позиция по умолчанию.
  • top / bottom – смещение от верхнего или нижнего края экрана.
  • rtl – направление текста (справа налево, если true).

Советы по использованию Notification

  • Использовать Notification для событий, которые требуют внимания, но не блокируют работу приложения.
  • Для кратких сообщений лучше использовать message, чтобы не перегружать интерфейс.
  • Поддерживать единообразие оформления уведомлений с использованием глобальной конфигурации.
  • Обеспечить возможность явного закрытия для важных уведомлений.

Эта система уведомлений Ant Design позволяет создавать гибкие, настраиваемые и визуально понятные уведомления, легко интегрируемые в любое React-приложение.

Оглавление