Descriptions

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

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

  • title – задаёт заголовок всей панели описаний. Может быть строкой или React-элементом.
  • bordered – булевое значение, добавляет границы между ячейками.
  • column – количество колонок в одной строке. Может быть числом (фиксированное количество колонок) или объектом для адаптивного отображения на разных размерах экрана:
<Descriptions
  title="Профиль пользователя"
  bordered
  column={{ xs: 1, sm: 2, md: 3 }}
>

  • layout – способ расположения текста:

    • "horizontal" – ключи и значения располагаются в строку (по умолчанию).
    • "vertical" – ключи располагаются над значениями.

  • size – размер компонента ('default' | 'middle' | 'small').

  • extra – React-элемент для размещения дополнительных действий (например, кнопки редактирования) в правой части заголовка.

Использование Descriptions.Item

Каждая пара «ключ–значение» задаётся с помощью Descriptions.Item, где ключи задаются через свойство label:

<Descriptions title="Пользователь" bordered>
  <Descriptions.Item label="Имя">Иван Иванов</Descriptions.Item>
  <Descriptions.Item label="Возраст">28</Descriptions.Item>
  <Descriptions.Item label="Профессия">Разработчик</Descriptions.Item>
</Descriptions>
  • span – определяет, сколько колонок занимает элемент. По умолчанию 1.
  • labelStyle и contentStyle – позволяют задавать индивидуальные стили для ключа и значения соответственно.
<Descriptions.Item label="Email" span={2} contentStyle={{ color: 'blue' }}>
  ivan@example.com
</Descriptions.Item>

Адаптивные колонки

Компонент поддерживает адаптивность через объект column, который позволяет менять количество колонок в зависимости от размера экрана:

<Descriptions
  title="Информация о заказе"
  bordered
  column={{ xs: 1, sm: 2, md: 3, lg: 4 }}
>
  <Descriptions.Item label="ID заказа">12345</Descriptions.Item>
  <Descriptions.Item label="Статус">В обработке</Descriptions.Item>
  <Descriptions.Item label="Дата">14.03.2026</Descriptions.Item>
</Descriptions>
  • xs – экраны <576px
  • sm – ≥576px
  • md – ≥768px
  • lg – ≥992px
  • xl – ≥1200px
  • xxl – ≥1600px

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

Вертикальное отображение

В вертикальном режиме ключи располагаются над значениями, что удобно для узких колонок или длинных данных:

<Descriptions title="Профиль пользователя" layout="vertical" bordered>
  <Descriptions.Item label="Имя">Анна Смирнова</Descriptions.Item>
  <Descriptions.Item label="Должность">Менеджер</Descriptions.Item>
  <Descriptions.Item label="Компания">ООО "Пример"</Descriptions.Item>
</Descriptions>

Встроенные действия и дополнительные элементы

Свойство extra позволяет добавлять кнопки или ссылки рядом с заголовком:

<Descriptions
  title="Профиль пользователя"
  extra={<Button type="primary">Редактировать</Button>}
  bordered
>
  <Descriptions.Item label="Имя">Мария Петрова</Descriptions.Item>
  <Descriptions.Item label="Email">maria@example.com</Descriptions.Item>
</Descriptions>

Гибкая настройка стилей

  • Стили таблицы: Через style на самом компоненте Descriptions можно задать общие отступы, ширину или фон.
  • Индивидуальные стили элементов: Используются labelStyle и contentStyle для каждого Descriptions.Item.
  • Настройка границ: Булево свойство bordered включает стандартные границы; для кастомных границ можно использовать CSS с селекторами .ant-descriptions-bordered.

Использование с динамическими данными

Для отображения данных, получаемых из API, часто используют map-функцию:

const userDetails = [
  { label: 'Имя', value: 'Иван Иванов' },
  { label: 'Возраст', value: 28 },
  { label: 'Профессия', value: 'Разработчик' }
];

<Descriptions title="Данные пользователя" bordered>
  {userDetails.map((item, index) => (
    <Descriptions.Item key={index} label={item.label}>
      {item.value}
    </Descriptions.Item>
  ))}
</Descriptions>

Такой подход упрощает поддержку и обновление информации без изменения структуры JSX.

Полезные приёмы

  • Использовать span для объединения нескольких колонок под один элемент.
  • Вертикальный режим подходит для мобильных устройств и длинных ключей.
  • Адаптивные колонки предотвращают переполнение таблицы на малых экранах.
  • Комбинировать с другими компонентами Ant Design, например Button, Tag или Avatar, для улучшения визуального представления.

Взаимодействие с другими компонентами

  • Grid и Layout: Descriptions хорошо интегрируется с сеткой для создания сложных информационных панелей.
  • Tabs: Можно помещать Descriptions внутрь вкладок для компактного отображения разных категорий информации.
  • Form: Descriptions может служить для отображения неизменяемой информации рядом с формами редактирования.

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

Оглавление