❤
npm
Sign UpSign In

bee-grid

0.0.2 • Public • Published

bee-grid

npm version Build Status devDependency Status

react bee-grid component for tinper-bee

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

使用方法

下载npm包

npm install --save bee-grid

import { 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

Readme

Keywords

Package Sidebar

Install

npm i bee-grid

Repository

github.com/tinper-bee/bee-grid

Homepage

github.com/tinper-bee/bee-grid

Weekly Downloads

2

Version

0.0.2

License

MIT

Last publish

Collaborators

  • boyuzhou
Try on RunKit
Report malware