Result

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

Основные свойства

  • status – определяет тип результата. Возможные значения:

    • success — успешная операция
    • error — ошибка
    • info — информационное сообщение
    • warning — предупреждение
    • 404, 403, 500 — стандартные HTTP-статусы

  • title – заголовок, основной текст результата. Может быть строкой или React-элементом.

  • subTitle – дополнительное описание, поясняющий текст под заголовком.

  • extra – позволяет размещать дополнительные действия, например кнопки, ссылки или пользовательские элементы.

  • icon – возможность переопределить стандартную иконку для статуса.

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

Базовый успешный результат

import { Result, Button } from 'antd';

<Result
  status="success"
  title="Операция выполнена успешно!"
  subTitle="Все данные были успешно сохранены."
  extra={[
    <Button type="primary" key="console">
      Просмотреть консоль
    </Button>,
    <Button key="buy">Вернуться на главную</Button>,
  ]}
/>

В этом примере используется статус success, который автоматически добавляет зеленую иконку галочки. Блок extra содержит две кнопки, позволяющие пользователю совершить последующие действия.

Отображение ошибки

<Result
  status="error"
  title="Ошибка выполнения операции"
  subTitle="Произошла непредвиденная ошибка. Пожалуйста, повторите попытку позже."
  extra={<Button type="primary">Повторить</Button>}
/>

Компонент Result автоматически подбирает красную иконку для статуса error, что делает интерфейс более наглядным.

Кастомизация иконки

Иконку можно полностью заменить на любую, используя свойство icon. Это позволяет интегрировать кастомные SVG или компоненты из @ant-design/icons.

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

<Result
  icon={<SmileOutlined />}
  title="Все прошло отлично!"
  subTitle="Пользователь доволен результатом."
/>

HTTP-статусы

Компонент предоставляет встроенные визуальные варианты для популярных HTTP-статусов. Они включают готовые изображения и оформление:

  • 404 — страница не найдена
  • 403 — доступ запрещен
  • 500 — внутренняя ошибка сервера

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

<Result
  status="404"
  title="404"
  subTitle="Извините, страница не найдена."
  extra={<Button type="primary">Вернуться на главную</Button>}
/>

Стилизация и адаптивность

Компонент Result адаптируется к ширине родительского контейнера. Можно применять кастомные стили через className и style:

<Result
  status="warning"
  title="Внимание"
  subTitle="Некоторые поля заполнены некорректно."
  style={{ backgroundColor: '#fff3cd', borderRadius: 8, padding: 24 }}
/>

Композиция с другими компонентами Ant Design

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

Пример интеграции с модальным окном:

import { Result, Button, Modal } from 'antd';
import { useState } from 'react';

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

  return (
    <>
      <Button type="primary" onCl ick={() => setVisible(true)}>
        Показать результат
      </Button>
      <Modal visible={visible} footer={null} onCan cel={() => setVisible(false)}>
        <Result
          status="success"
          title="Операция завершена"
          subTitle="Все данные были сохранены."
          extra={<Button onCl ick={() => setVisible(false)}>Закрыть</Button>}
        />
      </Modal>
    </>
  );
};

Практические рекомендации

  • Использовать Result для завершенных действий или статусов ошибок, чтобы повысить информативность интерфейса.
  • Подбирать соответствующий status, чтобы иконка и цветовое оформление соответствовали смыслу сообщения.
  • Использовать extra для размещения действий пользователя, повышая интерактивность.
  • Кастомизация иконок и стилей позволяет гармонично вписать компонент в любую дизайн-систему.

Компонент Result в Ant Design является мощным инструментом для визуализации состояния операций и обеспечивает лаконичное и наглядное представление информации. Он легко настраивается и интегрируется с другими компонентами экосистемы Ant Design, что делает его незаменимым элементом при разработке интерфейсов.

Оглавление