react bee-layout component for tinper-bee
栅格布局组件,包含container,row和col
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"
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
componentClass | 组件根元素 | element/ReactElement | div |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
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