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="这是 title"
  9.         thumb="https://cloud.githubusercontent.com/assets/1698185/18039916/f025c090-6dd9-11e6-9d86-a4d48a1bf049.png"
  10.         extra={<span>this is extra</span>}
  11.       />
  12.       <Card.Body>
  13.         <div>这是卡片内容</div>
  14.       </Card.Body>
  15.       <Card.Footer content="这是卡尾" extra={<div>这是尾部介绍</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="这是 title"
  9.         thumb="https://cloud.githubusercontent.com/assets/1698185/18039916/f025c090-6dd9-11e6-9d86-a4d48a1bf049.png"
  10.         extra={<span>this is extra</span>}
  11.       />
  12.       <Card.Body>
  13.         <div>这是卡片内容</div>
  14.       </Card.Body>
  15.       <Card.Footer content="这是卡尾" extra={<div>这是尾部介绍</div>} />
  16.     </Card>
  17.   </div>
  18. , mountNode);

Card卡片 - 图1

API

Card ( 适用平台：WEB、React-Native )

成员说明类型默认值
full是否通栏booleanfalse

Card.Header ( 适用平台：WEB、React-Native )

成员说明类型默认值
prefixCls (web only)样式类名前缀Stringam-card
title卡片标题React.Element、String
thumb卡片标题图片String
thumbStyle标题图片样式Object{}
extra卡片标题辅助内容React.Element、String

Card.Body ( 适用平台：WEB、React-Native )

成员说明类型默认值
无

Card.Footer ( 适用平台：WEB、React-Native )

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