Card 卡片

用于组织信息和操作,通常也作为详细信息的入口。

规则

  • 形状为矩形。

  • 可包含多种类型的元素,eg:图片、文字、按钮等。

代码演示

默认

Card 默认样式

  1. import { Card, WingBlank, WhiteSpace } from 'antd-mobile';
  2. ReactDOM.render(
  3. <WingBlank size="lg">
  4. <WhiteSpace size="lg" />
  5. <Card>
  6. <Card.Header
  7. title="This is title"
  8. thumb="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
  9. extra={<span>this is extra</span>}
  10. />
  11. <Card.Body>
  12. <div>This is content of `Card`</div>
  13. </Card.Body>
  14. <Card.Footer content="footer content" extra={<div>extra footer content</div>} />
  15. </Card>
  16. <WhiteSpace size="lg" />
  17. </WingBlank>
  18. , mountNode);

通栏

Card 通栏样式

  1. import { Card, WhiteSpace } from 'antd-mobile';
  2. ReactDOM.render(
  3. <div>
  4. <WhiteSpace size="lg" />
  5. <Card full>
  6. <Card.Header
  7. title="This is title"
  8. thumb="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
  9. extra={<span>this is extra</span>}
  10. />
  11. <Card.Body>
  12. <div>This is content of `Card`</div>
  13. </Card.Body>
  14. <Card.Footer content="footer content" extra={<div>extra footer content</div>} />
  15. </Card>
  16. </div>
  17. , mountNode);

Card卡片 - 图1

API

Card

属性说明类型默认值
full是否通栏booleanfalse

Card.Header

属性说明类型默认值
title卡片标题React.Element、String
thumb卡片标题图片String、React.Element
thumbStyle标题图片样式Object{}
extra卡片标题辅助内容React.Element、String

Card.Body

属性说明类型默认值
属性说明类型默认值
content尾部内容React.Element、String
extra尾部辅助内容React.Element、String