Card 卡片 #

概述 #

Card 卡片组件用于展示信息，支持多种布局和功能，是页面布局中常用的容器组件。

基础用法 #

基本卡片 #

tsx

import { Card } from 'antd';

<Card title="卡片标题" style={{ width: 300 }}>
  <p>卡片内容</p>
  <p>卡片内容</p>
  <p>卡片内容</p>
</Card>

无边框卡片 #

tsx

import { Card } from 'antd';

<Card bordered={false} style={{ width: 300 }}>
  <p>无边框卡片</p>
</Card>

简洁卡片 #

tsx

import { Card } from 'antd';

<Card style={{ width: 300 }}>
  <p>无标题卡片</p>
</Card>

卡片操作 #

操作栏 #

tsx

import { Card } from 'antd';
import { SettingOutlined, EditOutlined, EllipsisOutlined } from '@ant-design/icons';

<Card
  title="卡片标题"
  style={{ width: 300 }}
  actions={[
    <SettingOutlined key="setting" />,
    <EditOutlined key="edit" />,
    <EllipsisOutlined key="ellipsis" />,
  ]}
>
  <p>卡片内容</p>
</Card>

额外内容 #

tsx

import { Card, Button } from 'antd';

<Card
  title="卡片标题"
  extra={<Button type="link">更多</Button>}
  style={{ width: 300 }}
>
  <p>卡片内容</p>
</Card>

栅格卡片 #

内嵌栅格 #

tsx

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

<Card title="卡片标题">
  <Row gutter={16}>
    <Col span={12}>
      <Card>卡片内容</Card>
    </Col>
    <Col span={12}>
      <Card>卡片内容</Card>
    </Col>
  </Row>
</Card>

栅格布局 #

tsx

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

<Row gutter={16}>
  <Col span={8}>
    <Card title="卡片标题">卡片内容</Card>
  </Col>
  <Col span={8}>
    <Card title="卡片标题">卡片内容</Card>
  </Col>
  <Col span={8}>
    <Card title="卡片标题">卡片内容</Card>
  </Col>
</Row>

加载状态 #

tsx

import { Card, Skeleton } from 'antd';
import { useState } from 'react';

const [loading, setLoading] = useState(true);

<Card style={{ width: 300 }} loading={loading}>
  <p>卡片内容</p>
</Card>

卡片组 #

内嵌卡片 #

tsx

import { Card } from 'antd';

const { Meta } = Card;

<Card style={{ width: 300 }}>
  <Card
    style={{ width: '100%' }}
    cover={
      <img
        alt="example"
        src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
      />
    }
  >
    <Meta title="卡片标题" description="卡片描述" />
  </Card>
</Card>

栅格卡片组 #

tsx

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

const { Meta } = Card;

<Row gutter={16}>
  {data.map((item) => (
    <Col span={8} key={item.id}>
      <Card hoverable cover={<img alt={item.title} src={item.image} />}>
        <Meta title={item.title} description={item.description} />
      </Card>
    </Col>
  ))}
</Row>

可悬浮卡片 #

tsx

import { Card } from 'antd';

const { Meta } = Card;

<Card
  hoverable
  style={{ width: 240 }}
  cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoIzfQNwPJ.png" />}
>
  <Meta title="卡片标题" description="卡片描述" />
</Card>

内部卡片 #

tsx

import { Card } from 'antd';

<Card title="外层卡片">
  <Card type="inner" title="内层卡片">
    <p>内层卡片内容</p>
  </Card>
  <Card type="inner" title="内层卡片" style={{ marginTop: 16 }}>
    <p>内层卡片内容</p>
  </Card>
</Card>

标签页卡片 #

tsx

import { Card } from 'antd';

const tabList = [
  { key: 'tab1', tab: '标签一' },
  { key: 'tab2', tab: '标签二' },
];

const contentList = {
  tab1: <p>内容一</p>,
  tab2: <p>内容二</p>,
};

const [activeTabKey, setActiveTabKey] = useState('tab1');

<Card
  style={{ width: '100%' }}
  title="卡片标题"
  tabList={tabList}
  activeTabKey={activeTabKey}
  onTabChange={(key) => setActiveTabKey(key)}
>
  {contentList[activeTabKey]}
</Card>

API #

Card #

属性	说明	类型	默认值
actions	操作按钮	ReactNode[]	-
activeTabKey	当前激活的标签	string	-
bordered	是否有边框	boolean	true
bodyStyle	内容区域样式	CSSProperties	-
cover	封面图	ReactNode	-
defaultActiveTabKey	默认激活的标签	string	-
extra	右上角操作区域	ReactNode	-
headStyle	标题区域样式	CSSProperties	-
hoverable	鼠标悬停效果	boolean	false
loading	加载状态	boolean	false
size	卡片尺寸	`default` \| `small`	`default`
tabBarExtraContent	标签栏额外内容	ReactNode	-
tabBarStyle	标签栏样式	CSSProperties	-
tabList	标签列表	Tab[]	-
tabProps	Tabs 属性	object	-
title	卡片标题	ReactNode	-
type	卡片类型	`inner`	-
onTabChange	标签切换回调	(key) => void	-

Card.Grid #

属性	说明	类型	默认值
className	类名	string	-
hoverable	鼠标悬停效果	boolean	true
style	样式	CSSProperties	-

Card.Meta #

属性	说明	类型	默认值
avatar	头像	ReactNode	-
className	类名	string	-
description	描述	ReactNode	-
style	样式	CSSProperties	-
title	标题	ReactNode	-

最佳实践 #

1. 统计卡片 #

tsx

import { Card, Statistic } from 'antd';
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';

<Row gutter={16}>
  <Col span={12}>
    <Card>
      <Statistic
        title="活跃用户"
        value={11.28}
        precision={2}
        valueStyle={{ color: '#3f8600' }}
        prefix={<ArrowUpOutlined />}
        suffix="%"
      />
    </Card>
  </Col>
  <Col span={12}>
    <Card>
      <Statistic
        title="闲置用户"
        value={9.3}
        precision={2}
        valueStyle={{ color: '#cf1322' }}
        prefix={<ArrowDownOutlined />}
        suffix="%"
      />
    </Card>
  </Col>
</Row>

2. 列表卡片 #

tsx

import { Card, List, Avatar } from 'antd';

<Card title="最新动态">
  <List
    dataSource={data}
    renderItem={(item) => (
      <List.Item>
        <List.Item.Meta
          avatar={<Avatar src={item.avatar} />}
          title={item.title}
          description={item.description}
        />
      </List.Item>
    )}
  />
</Card>

3. 图片卡片 #

tsx

import { Card } from 'antd';

const { Meta } = Card;

<Card
  hoverable
  style={{ width: 240 }}
  cover={<img alt="example" src={imageUrl} />}
  actions={[
    <SettingOutlined key="setting" />,
    <EditOutlined key="edit" />,
    <EllipsisOutlined key="ellipsis" />,
  ]}
>
  <Meta title="标题" description="描述信息" />
</Card>

下一步 #

接下来学习 Message 全局提示组件！