Card

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

import { Card } from 'antd';

const { Meta } = Card;

<Card
  hoverable
  style={{ width: 300 }}
  cover={<img alt="example" src="https://via.placeholder.com/300" />}
>
  <Meta title="Card Title" description="This is the description" />
</Card>

В приведенном примере используется свойство hoverable, которое добавляет эффект наведения на карточку, и cover для вставки изображения. Meta используется для отображения заголовка и описания внутри карточки.

Основные свойства компонента Card

title – заголовок карточки. Может быть строкой или React-элементом.
extra – дополнительный элемент, часто используется для кнопок или ссылок, располагается в правом верхнем углу.
hoverable – включает эффект наведения, визуально выделяя карточку.
style – объект CSS-стилей, позволяет задавать размеры, отступы, фон и другие свойства.
cover – отображение медиа-контента (изображения или видео) поверх карточки.
actions – массив React-элементов, отображаемых в нижней части карточки для интерактивности.

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

<Card
  style={{ width: 300 }}
  actions={[
    <span key="like">Like</span>,
    <span key="share">Share</span>,
    <span key="more">More</span>
  ]}
>
  <Meta title="Action Card" description="Card with actions" />
</Card>

Вложенные карточки и Grid-сетка

Карточки могут быть вложенными или размещаться в сетке с использованием Row и Col из Ant Design. Это удобно для создания динамических панелей или галерей.

import { Row, Col, Card } from 'antd';

<Row gutter={16}>
  <Col span={8}>
    <Card title="Card 1">Content 1</Card>
  </Col>
  <Col span={8}>
    <Card title="Card 2">Content 2</Card>
  </Col>
  <Col span={8}>
    <Card title="Card 3">Content 3</Card>
  </Col>
</Row>

Свойство gutter задает промежутки между колонками. Использование span позволяет контролировать ширину карточки относительно 24-колоночной сетки Ant Design.

Карточки с изображением и описанием

Для более наглядного представления информации Card поддерживает встроенный компонент Meta:

<Card
  hoverable
  style={{ width: 240 }}
  cover={<img alt="example" src="https://via.placeholder.com/240" />}
>
  <Meta
    title="Product Name"
    description="Detailed description of the product goes here."
  />
</Card>

Ключевые моменты:

Изображение добавляется через cover.
Meta автоматически располагает заголовок и описание с отступами и типографикой.
Использование hoverable делает карточку интерактивной.

Карточки с вкладками (Tab Card)

Card поддерживает отображение контента через вкладки, используя свойства tabList и activeTabKey:

const tabList = [
  { key: 'tab1', tab: 'Tab 1' },
  { key: 'tab2', tab: 'Tab 2' }
];

const contentList = {
  tab1: <p>Content of Tab 1</p>,
  tab2: <p>Content of Tab 2</p>
};

<Card
  style={{ width: 300 }}
  tabList={tabList}
  activeTabKey={'tab1'}
>
  {contentList['tab1']}
</Card>

Особенности Tab Card:

tabList – массив объектов с ключами и названиями вкладок.
activeTabKey – активная вкладка, можно управлять состоянием через useState.
Содержимое каждой вкладки задается отдельно, что позволяет динамически менять контент при переключении вкладок.

Карточки с загрузкой (Loading State)

Card поддерживает режим загрузки, который полезен при асинхронном получении данных:

<Card loading={true} style={{ width: 300 }}>
  <Meta title="Loading Card" description="This card is loading" />
</Card>

При loading={true} контент заменяется на анимацию-заглушку, что улучшает пользовательский опыт при ожидании данных.

Карточки без рамки (Borderless Card)

Если требуется более минималистичный вид, можно отключить рамку с помощью свойства bordered:

<Card bordered={false} style={{ width: 300 }}>
  <Meta title="Borderless Card" description="Clean design without border" />
</Card>

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

Card часто используется вместе с другими компонентами Ant Design:

Button в extra или actions
Avatar и Tag внутри Meta для профилей
Carousel или Image в cover для галерей и слайдеров

Пример карточки профиля пользователя:

import { Card, Avatar, Tag } from 'antd';
const { Meta } = Card;

<Card
  style={{ width: 300 }}
  actions={[<span key="message">Message</span>]}
>
  <Meta
    avatar={<Avatar src="https://via.placeholder.com/40" />}
    title="John Doe"
    description={<Tag color="blue">Developer</Tag>}
  />
</Card>