Alert

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

Импорт и базовое использование

Для использования компонента необходимо импортировать его из библиотеки:

import { Alert } from 'antd';

Базовый пример использования:

<Alert message="Это информационное сообщение" type="info" />

Параметры:

  • message — основной текст сообщения.
  • type — тип уведомления, может принимать значения: success, info, warning, error.
  • description — дополнительное описание для более развернутого сообщения.
  • showIcon — отображение иконки (логично для визуального выделения типа уведомления).
  • closable — делает компонент закрываемым пользователем.

Пример с описанием и иконкой:

<Alert 
  message="Ошибка при сохранении данных"
  description="Произошла ошибка на сервере. Попробуйте позже."
  type="error"
  showIcon
  closable
/>

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

Компонент поддерживает четыре основных типа:

  1. success — сообщение об успешном завершении действия. Цвет — зеленый, иконка — галочка.

  2. info — информационное сообщение. Цвет — синий, иконка — информационный значок.

  3. warning — предупреждение. Цвет — оранжевый, иконка — восклицательный знак.

  4. error — сообщение об ошибке. Цвет — красный, иконка — крестик.

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

Управление закрытием Alert

С помощью пропа closable компонент становится закрываемым. Для отслеживания события закрытия используется коллбэк onClose:

<Alert
  message="Внимание"
  type="warning"
  closable
  onCl ose={() => console.log('Alert закрыт')}
/>

Для автоматического скрытия можно использовать состояние компонента:

import React, { useState } from 'react';
import { Alert, Button } from 'antd';

const Demo = () => {
  const [visible, setVisible] = useState(true);

  return (
    <>
      {visible && (
        <Alert
          message="Это сообщение можно скрыть"
          type="info"
          closable
          onCl ose={() => setVisible(false)}
        />
      )}
      <Button onCl ick={() => setVisible(true)}>Показать Alert</Button>
    </>
  );
};

Дополнительные возможности

1. Добавление иконки

По умолчанию showIcon отображает стандартную иконку, соответствующую типу. Для кастомных иконок используется проп icon:

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

<Alert
  message="Весёлое сообщение"
  type="success"
  icon={<SmileOutlined />}
/>

2. Управление стилем

Компонент поддерживает кастомизацию через проп style:

<Alert
  message="Пользовательское оформление"
  type="info"
  style={{ backgroundColor: '#f0f5ff', borderColor: '#91d5ff' }}
/>

3. Banner режим

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

<Alert
  message="Это баннерное уведомление"
  type="warning"
  banner
/>

Баннер автоматически принимает ширину контейнера и уменьшает внутренние отступы для компактного отображения.

Интеграция с другими компонентами

Alert часто используется совместно с компонентами Card, Modal, Form для информирования пользователей о результатах действий:

<Card title="Регистрация">
  <Alert 
    message="Заполните все обязательные поля" 
    type="warning" 
    showIcon 
  />
  <Form>{/* поля формы */}</Form>
</Card>

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

  • Выбор типа: использовать success для подтверждений, error для ошибок, warning для потенциальных проблем, info для общей информации.
  • Описание: если требуется пояснение, использовать description, чтобы сделать сообщение более развернутым.
  • Иконки: применять showIcon для визуальной идентификации типа.
  • Закрытие: closable делает интерфейс удобным, особенно для временных уведомлений.
  • Баннер: применять banner для глобальных уведомлений в верхней части страницы.

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

<Alert
  message="Обновление данных"
  description="Данные успешно сохранены. Вы можете продолжить работу."
  type="success"
  showIcon
  closable
  banner
  style={{ marginBottom: 16 }}
/>
<Alert
  message="Внимание"
  description="Некоторые поля заполнены некорректно."
  type="warning"
  showIcon
  closable
/>

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

Хотите, я могу дополнительно написать полный блок с примерами реактивного управления Alert через состояние и таймеры, чтобы уведомления автоматически исчезали через несколько секунд? Это полезно для учебника.

Оглавление