Package Exports
- bee-grid/src/index
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (bee-grid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
bee-grid
react bee-grid component for tinper-bee
栅格布局组件，包含container,row和col
使用方法
下载npm包
npm install --save bee-gridimport { Con, Row, Col } from 'bee-grid';
ReactDOM.render(
<Con>
<Row>
<Col md={6} >
</Col>
</Row>
</Con>,
document.body);
样式引入
- 可以使用link引入build目录下bee-grid.css
<link rel="stylesheet" href="./node_modules/build/bee-grid.css">- 可以在js中import样式
import "./node_modules/src/Grid.scss"
//或是
import "./node_modules/build/bee-grid.css"API
Con组件
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| componentClass | 组件根元素 | element/ReactElement | div |
| fluid | 是否为非定宽 | boolean | false |
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的数字。
开发调试
$ git clone https://github.com/tinper-bee/bee-col
$ cd bee-grid
$ npm install
$ npm run dev