Card 卡片

定义／Definition

卡片可以控制和组织信息，通常是更复杂或详细信息的切入点。

规则 / Rule

  • 卡片是矩形，可定义为任何高度。

  • 卡片可以包含自己的页头，页脚，列表视图，图像，和里面的任何元素。

  • 卡头和内容可以是HTML。

代码演示

展示

Card 

  1. import { Card } from 'antd-mobile';
  2. ReactDOM.render(
  3.   <div className="alert-container" style={{ padding: 10 }}>
  4.     <Card>
  5.       <Card.Header
  6.         title="这是 title"
  7.         thumb="http://gravatar.com/avatar/e9c13fb979736b16033acbce4c710ca1.png?size=32"
  8.         extra={<span>this is extra</span>}
  9.       />
  10.       <Card.Body>
  11.         <div style={{ marginLeft: 16 }}>这是卡片内容</div>
  12.       </Card.Body>
  13.       <Card.Footer content="这是卡尾" extra={<div>这是尾部介绍</div>} />
  14.     </Card>
  15.   </div>
  16. , mountNode);

Card卡片 - 图1

API

Card

成员说明类型默认值
无

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