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

Card卡片 - 图1

API

Card

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

Card.Header

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

Card.Body

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