Card

卡片式内容功能组件。

组件

Card

<Card> 组件，卡片容器。

Props

title

PropType: string

卡片标题。

header

PropType: node

卡片头部。

footer

PropType: node

卡片页脚。

卡片 <Card> 的 header 和 footer 可用 <Card.Child> 组装（见示例代码），也可自行组织。

Card.Child

<Card.Child> 用于组织 <Card> 的 header 和 footer。

Props

role

PropType: enum('header', 'footer')

充当的角色，默认为 header。

cover

PropType: string

卡片封面图片 URL，仅在 role 为 header 时有效。

示例

import React from 'react';
import {
  Container,
  Card,
} from 'amazeui-touch';
const header = (
  <Card.Child cover="http://lorempixel.com/1000/625/people/">
    <h3 className="card-title">
      Cover + 标题: 我思念的城市
    </h3>
  </Card.Child>
);
const footer = (
  <Card.Child role="footer">
    <a href="javascript: void(0)">Like</a>
    <a href="javascript: void(0)">Comment</a>
    <a href="javascript: void(0)">ReadMore</a>
  </Card.Child>
);
const CardExample = React.createClass({
  render() {
    return (
      <Container {...this.props}>
        <h3>简单的卡片</h3>
        <Card>
          怎能就让这不停燃烧的心，
          就这样耗尽消失在平庸里。
        </Card>
        <h3>标题</h3>
        <Card title="Card 标题">
          这是卡片内容。
        </Card>
        <h3>Card 头部、底部</h3>
        <Card
          header="Card header"
          footer="Card footer"
        >
          Card 内容
        </Card>
        <h3>自定义头部、底部</h3>
        <Card header={header}>
          风路过的时候  没能吹走 <br />
          这个城市太厚的灰尘 <br />
          多少次的雨水  从来没有 <br />
          冲掉你那沉重的忧伤 <br />
          你的忧伤  像我的绝望 <br />
          那样漫长
        </Card>
        <Card
          title="Card 标题"
          footer={footer}
        >
          <p>Card 内容</p>
        </Card>
      </Container>
    );
  }
});
export default CardExample;

DemoCopy

原文: http://t.amazeui.org/#/docs/card