简体中文

明信片组件

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

基础
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元素上。