bee-layout

react bee-layout component for tinper-bee

栅格布局组件，包含container,row和col

使用方法

下载npm包

npm install --save bee-layout

import { Row, Col } from 'bee-layout';
 
ReactDOM.render(
    <Row>
        <Col md={6} ></Col>
    </Row>,
    document.body);
 

样式引入

• 可以使用link引入build目录下Layout.css

<link rel="stylesheet" href="./node_modules/build/Layout.css">

• 可以在js中import样式

import "./node_modules/src/Layout.scss"
//或是
import "./node_modules/build/Layout.css"

API

Row组件

参数	说明	类型	默认值
componentClass	组件根元素	element/ReactElement	div

Col组件

参数	说明	类型	默认值
xs	移动设备显示列数(<768px)	number	-
sm	小屏幕桌面设备显示列数(≥768px)	number	-
md	中等屏幕设备显示列数(≥992px)	number	-
lg	大屏幕设备显示列数(≥1200px)	number	-
xsPull	移动屏幕设备到右边距列数	number	-
smPull	小屏幕设备到右边距列数	number	-
mdPull	中等屏幕设备到右边距列数	number	-
lgPull	大屏幕设备到右边距列数	number	-
xsPush	移动屏幕设备到左边距列数	number	-
smPush	小屏幕设备到左边距列数	number	-
mdPush	中等屏幕设备到左边距列数	number	-
lgPush	大屏幕设备到左边距列数	number	-
xsOffset	移动设备偏移列数	number	-
smOffset	小屏幕设备偏移列数	number	-
mdOffset	中等屏幕设备偏移列数	number	-
lgOffset	大屏幕设备偏移列数	number	-
componentClass	组件根元素	element/ReactElement	div

以上列数设置，只能设置1-12的数字。

开发调试

$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-layout
$ cd bee-layout
$ npm install
$ npm run dev