rc-flex-layout
v0.0.10
Published
基于react和flex的快速布局方式,只需要简单配置就可
Downloads
8
Readme
rc-flex-layout
基于react和flex的快速布局方式,只需要简单配置就可
安装
npm install rc-flex-layout
使用
import { HView, VView } from 'rc-flex-layout';
<HView gap={50}>
<HView width={100} height="100px" bgColor="red" hAlign="center" onClick={this.handleClick.bind(this)}>100</HView>
<VView width={200} height={200} padding={20} bgColor="blue" gap={10}>
<div>a</div>
<div>b</div>
</VView>
<HView width={300} height={300} bgColor="green">300</HView>
</HView>
API
公共部分
| 字段 | 说明 | 类型 | 默认值 | | -------- | ------ | ------------------------- | -------------------- | | width | 宽度 | string | number | - | | height | 高度 | string | number | - | | gap | 间隔 | string | number | - | | padding | 内间距 | string | number | - | | flex | 缩放自动布局 | string | number | boolean | | | overflow | 超出展示 | string | auto|hidden|scroll | | bgColor | 背景色 | string | - |
HView
| 字段 | 说明 | 类型 | 默认值 | | ------ | ------ | ------ | ------------------------------------------------------ | | hAlign | 横向内容展示 | string | flex-start|flex-end|center| space-between|space-around | | vAlign | 纵向内容展示 | string | flex-start| flex-end| center| baseline| stretch |
VView
| 字段 | 说明 | 类型 | 默认值 | | ------ | ------ | ------ | --------------------------------------------------------- | | hAlign | 横向内容展示 | string | flex-start| flex-end| center| baseline| stretch | | vAlign | 纵向内容展示 | string | flex-start|flex-end|center| space-between|space-around |