Card卡片

通用卡片容器。

何时使用

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

代码演示

Card卡片 - 图1

典型卡片

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

  1. import { Card } from 'antd';
  2. ReactDOM.render(
  3. <div>
  4. <Card title="Default size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
  5. <p>Card content</p>
  6. <p>Card content</p>
  7. <p>Card content</p>
  8. </Card>
  9. <Card size="small" title="Small size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
  10. <p>Card content</p>
  11. <p>Card content</p>
  12. <p>Card content</p>
  13. </Card>
  14. </div>,
  15. mountNode,
  16. );

Card卡片 - 图2

无边框

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

  1. import { Card } from 'antd';
  2. ReactDOM.render(
  3. <div className="site-card-border-less-wrapper">
  4. <Card title="Card title" bordered={false} style={{ width: 300 }}>
  5. <p>Card content</p>
  6. <p>Card content</p>
  7. <p>Card content</p>
  8. </Card>
  9. </div>,
  10. mountNode,
  11. );
  1. .site-card-border-less-wrapper {
  2. background: #ececec;
  3. padding: 30px;
  4. }

Card卡片 - 图3

简洁卡片

只包含内容区域。

  1. import { Card } from 'antd';
  2. ReactDOM.render(
  3. <Card style={{ width: 300 }}>
  4. <p>Card content</p>
  5. <p>Card content</p>
  6. <p>Card content</p>
  7. </Card>,
  8. mountNode,
  9. );

Card卡片 - 图4

更灵活的内容展示

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

  1. import { Card } from 'antd';
  2. const { Meta } = Card;
  3. ReactDOM.render(
  4. <Card
  5. hoverable
  6. style={{ width: 240 }}
  7. cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
  8. >
  9. <Meta title="Europe Street beat" description="www.instagram.com" />
  10. </Card>,
  11. mountNode,
  12. );

Card卡片 - 图5

栅格卡片

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

  1. import { Card, Col, Row } from 'antd';
  2. ReactDOM.render(
  3. <div className="site-card-wrapper">
  4. <Row gutter={16}>
  5. <Col span={8}>
  6. <Card title="Card title" bordered={false}>
  7. Card content
  8. </Card>
  9. </Col>
  10. <Col span={8}>
  11. <Card title="Card title" bordered={false}>
  12. Card content
  13. </Card>
  14. </Col>
  15. <Col span={8}>
  16. <Card title="Card title" bordered={false}>
  17. Card content
  18. </Card>
  19. </Col>
  20. </Row>
  21. </div>,
  22. mountNode,
  23. );
  1. .site-card-wrapper {
  2. background: #ececec;
  3. padding: 30px;
  4. }

Card卡片 - 图6

预加载的卡片

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

  1. import { Skeleton, Switch, Card, Avatar } from 'antd';
  2. import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
  3. const { Meta } = Card;
  4. class App extends React.Component {
  5. state = {
  6. loading: true,
  7. };
  8. onChange = checked => {
  9. this.setState({ loading: !checked });
  10. };
  11. render() {
  12. const { loading } = this.state;
  13. return (
  14. <div>
  15. <Switch checked={!loading} onChange={this.onChange} />
  16. <Card style={{ width: 300, marginTop: 16 }} loading={loading}>
  17. <Meta
  18. avatar={
  19. <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
  20. }
  21. title="Card title"
  22. description="This is the description"
  23. />
  24. </Card>
  25. <Card
  26. style={{ width: 300, marginTop: 16 }}
  27. actions={[
  28. <SettingOutlined key="setting" />,
  29. <EditOutlined key="edit" />,
  30. <EllipsisOutlined key="ellipsis" />,
  31. ]}
  32. >
  33. <Skeleton loading={loading} avatar active>
  34. <Meta
  35. avatar={
  36. <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
  37. }
  38. title="Card title"
  39. description="This is the description"
  40. />
  41. </Skeleton>
  42. </Card>
  43. </div>
  44. );
  45. }
  46. }
  47. ReactDOM.render(<App />, mountNode);

Card卡片 - 图7

网格型内嵌卡片

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

  1. import { Card } from 'antd';
  2. const gridStyle = {
  3. width: '25%',
  4. textAlign: 'center',
  5. };
  6. ReactDOM.render(
  7. <Card title="Card Title">
  8. <Card.Grid style={gridStyle}>Content</Card.Grid>
  9. <Card.Grid hoverable={false} style={gridStyle}>
  10. Content
  11. </Card.Grid>
  12. <Card.Grid style={gridStyle}>Content</Card.Grid>
  13. <Card.Grid style={gridStyle}>Content</Card.Grid>
  14. <Card.Grid style={gridStyle}>Content</Card.Grid>
  15. <Card.Grid style={gridStyle}>Content</Card.Grid>
  16. <Card.Grid style={gridStyle}>Content</Card.Grid>
  17. </Card>,
  18. mountNode,
  19. );

Card卡片 - 图8

内部卡片

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

  1. import { Card } from 'antd';
  2. ReactDOM.render(
  3. <Card title="Card title">
  4. <p className="site-card-demo-inner-p">Group title</p>
  5. <Card type="inner" title="Inner Card title" extra={<a href="#">More</a>}>
  6. Inner Card content
  7. </Card>
  8. <Card
  9. style={{ marginTop: 16 }}
  10. type="inner"
  11. title="Inner Card title"
  12. extra={<a href="#">More</a>}
  13. >
  14. Inner Card content
  15. </Card>
  16. </Card>,
  17. mountNode,
  18. );
  1. .site-card-demo-inner-p {
  2. font-size: 14px;
  3. color: rgba(0, 0, 0, 0.85);
  4. margin-bottom: 16px;
  5. font-weight: 500;
  6. }

Card卡片 - 图9

带页签的卡片

可承载更多内容。

  1. import { Card } from 'antd';
  2. const tabList = [
  3. {
  4. key: 'tab1',
  5. tab: 'tab1',
  6. },
  7. {
  8. key: 'tab2',
  9. tab: 'tab2',
  10. },
  11. ];
  12. const contentList = {
  13. tab1: <p>content1</p>,
  14. tab2: <p>content2</p>,
  15. };
  16. const tabListNoTitle = [
  17. {
  18. key: 'article',
  19. tab: 'article',
  20. },
  21. {
  22. key: 'app',
  23. tab: 'app',
  24. },
  25. {
  26. key: 'project',
  27. tab: 'project',
  28. },
  29. ];
  30. const contentListNoTitle = {
  31. article: <p>article content</p>,
  32. app: <p>app content</p>,
  33. project: <p>project content</p>,
  34. };
  35. class TabsCard extends React.Component {
  36. state = {
  37. key: 'tab1',
  38. noTitleKey: 'app',
  39. };
  40. onTabChange = (key, type) => {
  41. console.log(key, type);
  42. this.setState({ [type]: key });
  43. };
  44. render() {
  45. return (
  46. <div>
  47. <Card
  48. style={{ width: '100%' }}
  49. title="Card title"
  50. extra={<a href="#">More</a>}
  51. tabList={tabList}
  52. activeTabKey={this.state.key}
  53. onTabChange={key => {
  54. this.onTabChange(key, 'key');
  55. }}
  56. >
  57. {contentList[this.state.key]}
  58. </Card>
  59. <br />
  60. <br />
  61. <Card
  62. style={{ width: '100%' }}
  63. tabList={tabListNoTitle}
  64. activeTabKey={this.state.noTitleKey}
  65. tabBarExtraContent={<a href="#">More</a>}
  66. onTabChange={key => {
  67. this.onTabChange(key, 'noTitleKey');
  68. }}
  69. >
  70. {contentListNoTitle[this.state.noTitleKey]}
  71. </Card>
  72. </div>
  73. );
  74. }
  75. }
  76. ReactDOM.render(<TabsCard />, mountNode);

Card卡片 - 图10

支持更多内容配置

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

  1. import { Card, Avatar } from 'antd';
  2. import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
  3. const { Meta } = Card;
  4. ReactDOM.render(
  5. <Card
  6. style={{ width: 300 }}
  7. cover={
  8. <img
  9. alt="example"
  10. src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
  11. />
  12. }
  13. actions={[
  14. <SettingOutlined key="setting" />,
  15. <EditOutlined key="edit" />,
  16. <EllipsisOutlined key="ellipsis" />,
  17. ]}
  18. >
  19. <Meta
  20. avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
  21. title="Card title"
  22. description="This is the description"
  23. />
  24. </Card>,
  25. mountNode,
  26. );

API

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

Card

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

Card.Grid

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

Card.Meta

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