明信片组件

明信片组件，用以展示图文。

基础

import React, {Component} from 'react';
import {Postcard, Image} from 'hana-ui';


const styles = {
  width: 400
  // height: 250
};

/**
 * @en
 * Base
 *
 * A default postcard example.
 *
 * @cn
 * 基础
 *
 * 一个基本的明信片组件。
 */

export default class ExampleBase extends Component {
  render() {
    return (
      <div>
        <Postcard title="doge >>>" subtitle="(test)" style={styles}>
          <Image src="https://t4.kn3.net/taringa/5/C/0/6/C/9/DogeDogOficial/59C.jpg" fullWidth />
        </Postcard>
      </div>
    );
  }
}

一个基本的明信片组件。

doge >>>(test)

明信片组

import React, {Component} from 'react';
import {Postcard, PostcardGroup, Image} from 'hana-ui';

const styles = {
  width: 200
};

/**
 * @en
 * Group
 *
 * PostcardGroup with severa postcards.
 *
 * @cn
 * 明信片组
 *
 * 明信片组，包含一组明信片。
 */

export default class ExampleBase extends Component {
  render() {
    return (
      <div>
        <PostcardGroup>
          <Postcard title="Doge1" style={styles}>
            <Image src="https://t4.kn3.net/taringa/5/C/0/6/C/9/DogeDogOficial/59C.jpg" fullWidth />
          </Postcard>
          <Postcard title="Doge2" style={styles}>
            <Image src="https://t4.kn3.net/taringa/5/C/0/6/C/9/DogeDogOficial/59C.jpg" fullWidth />
          </Postcard>
          <Postcard title="Doge3" style={styles}>
            <Image src="https://t4.kn3.net/taringa/5/C/0/6/C/9/DogeDogOficial/59C.jpg" fullWidth />
          </Postcard>
        </PostcardGroup>
      </div>
    );
  }
}

明信片组，包含一组明信片。

Doge1

Doge2

Doge3

属性说明

属性名	类型	说明
style	object	明信片的`style`
children	node	子节点
title	node	明信片的标题
subtitle	node	明信片的副标题
titleStyle	object	明信片的标题样式
subtitleStyle	object	明信片的副标题样式
className	string	明信片的class

未在文档中说明的属性将会被自动加到根元素或form元素上。

属性说明

属性名	类型	默认值	说明
children	node		子节点
height	number		`PostcardGroup`的高度
mode	enum: 'normal' 'random' 'clothesline'	'normal'	`PostcardGroup`的显示模式
className	string		明信片的class
style	object		明信片的`style`

未在文档中说明的属性将会被自动加到根元素或form元素上。