Card卡片

通用卡片容器。

何时使用#

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

代码演示

Default size card

Card content

Card content

Card content

Small size card

Card content

Card content

Card content

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

expand codeexpand code
import { Card } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <>
    <Card title="Default size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
      <p>Card content</p>
      <p>Card content</p>
      <p>Card content</p>
    </Card>
    <Card size="small" title="Small size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
      <p>Card content</p>
      <p>Card content</p>
      <p>Card content</p>
    </Card>
  </>
);

export default App;
Card title

Card content

Card content

Card content

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

expand codeexpand code
import { Card } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <div className="site-card-border-less-wrapper">
    <Card title="Card title" bordered={false} style={{ width: 300 }}>
      <p>Card content</p>
      <p>Card content</p>
      <p>Card content</p>
    </Card>
  </div>
);

export default App;
.site-card-border-less-wrapper {
  padding: 30px;
  background: #ececec;
}

Card content

Card content

Card content

只包含内容区域。

expand codeexpand code
import { Card } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <Card style={{ width: 300 }}>
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
  </Card>
);

export default App;
example
Europe Street beat
www.instagram.com

可以利用 Card.Meta 支持更灵活的内容。

expand codeexpand code
import { Card } from 'antd';
import React from 'react';

const { Meta } = Card;

const App: React.FC = () => (
  <Card
    hoverable
    style={{ width: 240 }}
    cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
  >
    <Meta title="Europe Street beat" description="www.instagram.com" />
  </Card>
);

export default App;
Card title
Card content
Card title
Card content
Card title
Card content

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

expand codeexpand code
import { Card, Col, Row } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <div className="site-card-wrapper">
    <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>
);

export default App;

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

expand codeexpand code
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import { Avatar, Card, Skeleton, Switch } from 'antd';
import React, { useState } from 'react';

const { Meta } = Card;

const App: React.FC = () => {
  const [loading, setLoading] = useState(true);

  const onChange = (checked: boolean) => {
    setLoading(!checked);
  };

  return (
    <>
      <Switch checked={!loading} onChange={onChange} />

      <Card style={{ width: 300, marginTop: 16 }} loading={loading}>
        <Meta
          avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
          title="Card title"
          description="This is the description"
        />
      </Card>

      <Card
        style={{ width: 300, marginTop: 16 }}
        actions={[
          <SettingOutlined key="setting" />,
          <EditOutlined key="edit" />,
          <EllipsisOutlined key="ellipsis" />,
        ]}
      >
        <Skeleton loading={loading} avatar active>
          <Meta
            avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
            title="Card title"
            description="This is the description"
          />
        </Skeleton>
      </Card>
    </>
  );
};

export default App;
Card Title
Content
Content
Content
Content
Content
Content
Content

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

expand codeexpand code
import { Card } from 'antd';
import React from 'react';

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

const App: React.FC = () => (
  <Card title="Card Title">
    <Card.Grid style={gridStyle}>Content</Card.Grid>
    <Card.Grid hoverable={false} 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>
);

export default App;
Card title
Inner Card title
Inner Card content
Inner Card title
Inner Card content

可以放在普通卡片内部,展示多层级结构的信息。

expand codeexpand code
import { Card } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <Card title="Card title">
    <Card type="inner" title="Inner Card title" extra={<a href="#">More</a>}>
      Inner Card content
    </Card>
    <Card
      style={{ marginTop: 16 }}
      type="inner"
      title="Inner Card title"
      extra={<a href="#">More</a>}
    >
      Inner Card content
    </Card>
  </Card>
);

export default App;
Card title

content1



app content

可承载更多内容。

expand codeexpand code
import { Card } from 'antd';
import React, { useState } from 'react';

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

const contentList: Record<string, React.ReactNode> = {
  tab1: <p>content1</p>,
  tab2: <p>content2</p>,
};

const tabListNoTitle = [
  {
    key: 'article',
    tab: 'article',
  },
  {
    key: 'app',
    tab: 'app',
  },
  {
    key: 'project',
    tab: 'project',
  },
];

const contentListNoTitle: Record<string, React.ReactNode> = {
  article: <p>article content</p>,
  app: <p>app content</p>,
  project: <p>project content</p>,
};

const App: React.FC = () => {
  const [activeTabKey1, setActiveTabKey1] = useState<string>('tab1');
  const [activeTabKey2, setActiveTabKey2] = useState<string>('app');

  const onTab1Change = (key: string) => {
    setActiveTabKey1(key);
  };
  const onTab2Change = (key: string) => {
    setActiveTabKey2(key);
  };

  return (
    <>
      <Card
        style={{ width: '100%' }}
        title="Card title"
        extra={<a href="#">More</a>}
        tabList={tabList}
        activeTabKey={activeTabKey1}
        onTabChange={key => {
          onTab1Change(key);
        }}
      >
        {contentList[activeTabKey1]}
      </Card>
      <br />
      <br />
      <Card
        style={{ width: '100%' }}
        tabList={tabListNoTitle}
        activeTabKey={activeTabKey2}
        tabBarExtraContent={<a href="#">More</a>}
        onTabChange={key => {
          onTab2Change(key);
        }}
      >
        {contentListNoTitle[activeTabKey2]}
      </Card>
    </>
  );
};

export default App;
example
Card title
This is the description

一种支持封面、头像、标题和描述信息的卡片。

expand codeexpand code
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import { Avatar, Card } from 'antd';
import React from 'react';

const { Meta } = Card;

const App: React.FC = () => (
  <Card
    style={{ width: 300 }}
    cover={
      <img
        alt="example"
        src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
      />
    }
    actions={[
      <SettingOutlined key="setting" />,
      <EditOutlined key="edit" />,
      <EllipsisOutlined key="ellipsis" />,
    ]}
  >
    <Meta
      avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
      title="Card title"
      description="This is the description"
    />
  </Card>
);

export default App;

API#

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

Card#

参数说明类型默认值版本
actions卡片操作组,位置在卡片底部Array<ReactNode>-
activeTabKey当前激活页签的 keystring-
bodyStyle内容区域自定义样式CSSProperties-
bordered是否有边框booleantrue
cover卡片封面ReactNode-
defaultActiveTabKey初始化选中页签的 key,如果没有设置 activeTabKeystring第一个页签
extra卡片右上角的操作区域ReactNode-
headStyle自定义标题区域样式CSSProperties-
hoverable鼠标移过时可浮起booleanfalse
loading当卡片内容还在加载中时,可以用 loading 展示一个占位booleanfalse
sizecard 的尺寸default | smalldefault
tabBarExtraContenttab bar 上额外的元素ReactNode-
tabList页签标题列表Array<{key: string, tab: ReactNode}>-
tabPropsTabs--
title卡片标题ReactNode-
type卡片类型,可设置为 inner 或 不设置string-
onTabChange页签切换的回调(key) => void-

Card.Grid#

参数说明类型默认值版本
className网格容器类名string-
hoverable鼠标移过时可浮起booleantrue
style定义网格容器类名的样式CSSProperties-

Card.Meta#

参数说明类型默认值版本
avatar头像/图标ReactNode-
className容器类名string-
description描述内容ReactNode-
style定义容器类名的样式CSSProperties-
title标题内容ReactNode-
Calendar日历Carousel走马灯