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 style={{ background: '#ECECEC', padding: '30px' }}>
  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. );

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 style={{ background: '#ECECEC', padding: '30px' }}>
  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. );

Card卡片 - 图6

预加载的卡片

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

  1. import { Skeleton, Switch, Card, Icon, Avatar } from 'antd';
  2. const { Meta } = Card;
  3. class App extends React.Component {
  4. state = {
  5. loading: true,
  6. };
  7. onChange = checked => {
  8. this.setState({ loading: !checked });
  9. };
  10. render() {
  11. const { loading } = this.state;
  12. return (
  13. <div>
  14. <Switch checked={!loading} onChange={this.onChange} />
  15. <Card style={{ width: 300, marginTop: 16 }} loading={loading}>
  16. <Meta
  17. avatar={
  18. <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
  19. }
  20. title="Card title"
  21. description="This is the description"
  22. />
  23. </Card>
  24. <Card
  25. style={{ width: 300, marginTop: 16 }}
  26. actions={[
  27. <Icon type="setting" key="setting" />,
  28. <Icon type="edit" key="edit" />,
  29. <Icon type="ellipsis" key="ellipsis" />,
  30. ]}
  31. >
  32. <Skeleton loading={loading} avatar active>
  33. <Meta
  34. avatar={
  35. <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
  36. }
  37. title="Card title"
  38. description="This is the description"
  39. />
  40. </Skeleton>
  41. </Card>
  42. </div>
  43. );
  44. }
  45. }
  46. 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
  5. style={{
  6. fontSize: 14,
  7. color: 'rgba(0, 0, 0, 0.85)',
  8. marginBottom: 16,
  9. fontWeight: 500,
  10. }}
  11. >
  12. Group title
  13. </p>
  14. <Card type="inner" title="Inner Card title" extra={<a href="#">More</a>}>
  15. Inner Card content
  16. </Card>
  17. <Card
  18. style={{ marginTop: 16 }}
  19. type="inner"
  20. title="Inner Card title"
  21. extra={<a href="#">More</a>}
  22. >
  23. Inner Card content
  24. </Card>
  25. </Card>,
  26. mountNode,
  27. );

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

API

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

Card

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

Card.Grid

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

Card.Meta

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