Card 卡片

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

规则

  • 形状为矩形。

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

代码演示

默认

Card 默认样式 

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

通栏

Card 通栏样式 

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