1 | # bee-layout
|
2 |
|
3 | [![npm version](https://img.shields.io/npm/v/bee-layout.svg)](https://www.npmjs.com/package/bee-layout)
|
4 | [![Build Status](https://img.shields.io/travis/tinper-bee/bee-layout/master.svg)](https://travis-ci.org/tinper-bee/bee-layout)
|
5 | [![Coverage Status](https://coveralls.io/repos/github/tinper-bee/bee-layout/badge.svg?branch=master)](https://coveralls.io/github/tinper-bee/bee-layout?branch=master)
|
6 |
|
7 |
|
8 | react bee-layout component for tinper-bee
|
9 |
|
10 | 栅格布局组件,包含container,row和col
|
11 |
|
12 | ## 使用方法
|
13 |
|
14 | #### 下载npm包
|
15 |
|
16 | ```
|
17 | npm install --save bee-layout
|
18 | ```
|
19 |
|
20 | ```js
|
21 | import { Con, Row, Col } from 'bee-layout';
|
22 |
|
23 | ReactDOM.render(
|
24 | <Con>
|
25 | <Row>
|
26 | <Col md={6} >
|
27 | </Col>
|
28 | </Row>
|
29 | </Con>,
|
30 | document.body);
|
31 |
|
32 | ```
|
33 |
|
34 | #### 样式引入
|
35 |
|
36 | - 可以使用link引入build目录下Layout.css
|
37 | ```
|
38 | <link rel="stylesheet" href="./node_modules/build/Layout.css">
|
39 | ```
|
40 | - 可以在js中import样式
|
41 | ```js
|
42 | import "./node_modules/src/Layout.scss"
|
43 | //或是
|
44 | import "./node_modules/build/Layout.css"
|
45 | ```
|
46 |
|
47 |
|
48 |
|
49 | ## API
|
50 |
|
51 | ### Con组件
|
52 |
|
53 | |参数|说明|类型|默认值|
|
54 | |:---|:-----|:----|:------|
|
55 | |componentClass|组件根元素|element/ReactElement|div|
|
56 | |fluid|是否为非定宽|boolean|false|
|
57 |
|
58 | ### Row组件
|
59 |
|
60 | |参数|说明|类型|默认值|
|
61 | |:---|:-----|:----|:------|
|
62 | |componentClass|组件根元素|element/ReactElement|div|
|
63 |
|
64 | ### Col组件
|
65 |
|
66 | |参数|说明|类型|默认值|
|
67 | |:---|:-----|:----|:------|
|
68 | |xs|移动设备显示列数(<768px)|number|-|
|
69 | |sm|小屏幕桌面设备显示列数(≥768px)|number|-|
|
70 | |md|中等屏幕设备显示列数(≥992px)|number|-|
|
71 | |lg|大屏幕设备显示列数(≥1200px)|number|-|
|
72 | |xsPull|移动屏幕设备到右边距列数|number|-|
|
73 | |smPull|小屏幕设备到右边距列数|number|-|
|
74 | |mdPull|中等屏幕设备到右边距列数|number|-|
|
75 | |lgPull|大屏幕设备到右边距列数|number|-|
|
76 | |xsPush|移动屏幕设备到左边距列数|number|-|
|
77 | |smPush|小屏幕设备到左边距列数|number|-|
|
78 | |mdPush|中等屏幕设备到左边距列数|number|-|
|
79 | |lgPush|大屏幕设备到左边距列数|number|-|
|
80 | |xsOffset|移动设备偏移列数|number|-|
|
81 | |smOffset|小屏幕设备偏移列数|number|-|
|
82 | |mdOffset|中等屏幕设备偏移列数|number|-|
|
83 | |lgOffset|大屏幕设备偏移列数|number|-|
|
84 | |componentClass|组件根元素|element/ReactElement|div|
|
85 |
|
86 | 以上列数设置,只能设置1-12的数字。
|
87 |
|
88 | #### 开发调试
|
89 |
|
90 | ```sh
|
91 | $ npm install -g bee-tools
|
92 | $ git clone https://github.com/tinper-bee/bee-layout
|
93 | $ cd bee-layout
|
94 | $ npm install
|
95 | $ npm run dev
|
96 | ```
|
97 |
|
\ | No newline at end of file |