明信片组件,用以展示图文。
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>
);
}
}
一个基本的明信片组件。
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>
);
}
}
明信片组,包含一组明信片。
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
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元素上。