Card卡片

通用卡片容器。

何时使用#

最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。

代码演示

Card title

Card content

典型卡片

包含标题、内容、操作区域。

import { Card } from 'antd';

ReactDOM.render(
  <Card title="Card title" extra={<a href="#">More</a>} style={{ width: 300 }}>
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
  </Card>
, mountNode);

Card title

Card content

无边框

在灰色背景上使用无边框的卡片。

import { Card } from 'antd';

ReactDOM.render(
  <div style={{ background: '#ECECEC', padding: '30px' }}>
    <Card title="Card title" bordered={false} style={{ width: 300 }}>
      <p>Card content</p>
      <p>Card content</p>
      <p>Card content</p>
    </Card>
  </div>
, mountNode);

Card content

简洁卡片

只包含内容区域。

import { Card } from 'antd';

ReactDOM.render(
  <Card style={{ width: 300 }}>
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
  </Card>
, mountNode);

Europe Street beat

www.instagram.com

更灵活的内容展示

可以调整默认边距，设定宽度。

import { Card } from 'antd';

ReactDOM.render(
  <Card style={{ width: 240 }} bodyStyle={{ padding: 0 }}>
    <div className="custom-image">
      <img alt="example" width="100%" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
    </div>
    <div className="custom-card">
      <h3>Europe Street beat</h3>
      <p>www.instagram.com</p>
    </div>
  </Card>
, mountNode);
.custom-image img {
  display: block;
}
.custom-card {
  padding: 10px 16px;
}
.custom-card p {
  color: #999;
}

Card title

Card content

Card title

Card content

Card title

Card content

栅格卡片

在系统概览页面常常和栅格进行配合。

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

ReactDOM.render(
  <div style={{ background: '#ECECEC', padding: '30px' }}>
    <Row gutter={16}>
      <Col span={8}>
        <Card title="Card title" bordered={false}>Card content</Card>
      </Col>
      <Col span={8}>
        <Card title="Card title" bordered={false}>Card content</Card>
      </Col>
      <Col span={8}>
        <Card title="Card title" bordered={false}>Card content</Card>
      </Col>
    </Row>
  </div>
, mountNode);

Card title

预加载的卡片

数据读入前会有文本块样式。

import { Card } from 'antd';

ReactDOM.render(
  <Card loading title="Card title" style={{ width: '34%' }}>
    Whatever content
  </Card>
, mountNode);

Card Title

Content

网格型内嵌卡片

一种常见的卡片内容区隔模式。

import { Card } from 'antd';

const gridStyle = {
  width: '25%',
  textAlign: 'center',
};

ReactDOM.render(
  <Card title="Card Title" noHovering>
    <Card.Grid style={gridStyle}>Content</Card.Grid>
    <Card.Grid style={gridStyle}>Content</Card.Grid>
    <Card.Grid style={gridStyle}>Content</Card.Grid>
    <Card.Grid style={gridStyle}>Content</Card.Grid>
    <Card.Grid style={gridStyle}>Content</Card.Grid>
    <Card.Grid style={gridStyle}>Content</Card.Grid>
    <Card.Grid style={gridStyle}>Content</Card.Grid>
  </Card>
, mountNode);

API#

<Card title="卡片标题">卡片内容</Card>

Card#

参数	说明	类型	默认值
bodyStyle	内容区域自定义样式	object	-
bordered	是否有边框	boolean	true
extra	卡片右上角的操作区域	string\|ReactNode	-
loading	当卡片内容还在加载中时，可以用 loading 展示一个占位	boolean	false
noHovering	取消鼠标移过浮起	boolean	false
title	卡片标题	string\|ReactNode	-

Card.Grid#

Property	Description	Type	Default
className	网格容器类名	string	-
style	定义网格容器类名的样式	object	-

Components

Card卡片

何时使用#

代码演示

Europe Street beat

API#

Card#

Card.Grid#