# bee-layout
> [](https://www.npmjs.com/package/bee-layout) [](https://travis-ci.org/tinper-bee/bee-layout) [ · MIT license · 0 weekly downloads
## Install
```sh
npm install bee-layout
pnpm add bee-layout
yarn add bee-layout
bun add bee-layout
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.2.8 |
| Published | 2020-04-24 |
| First published | 2016-11-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=4.0.0 |
| Dependencies | 2 |
| Unpacked size | 41.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | zhouboyu |
| Maintainers | ahua52, banyudu, bjyxszd, boyuzhou, guoyongfeng, huayingjie, jonyw, kvkens, liushaozhen, liuyk, npm_yx, tinper-bot, whizbz, yangchch, yonyoufed, zhaoyuchief |
| Keywords | react, react-component, react-layout, iuap-design, neoui-react, layout |
## Links
- npm: https://www.npmjs.com/package/bee-layout
- Repository: https://github.com/tinper-bee/bee-layout
- Issues: https://github.com/tinper-bee/bee-layout/issues
- npm.io page: https://npm.io/package/bee-layout
## Dependencies (2)
- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [tinper-bee-core](https://npm.io/package/tinper-bee-core.md) latest
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 1.2.8 (latest) — 2020-04-24
- 1.2.7 — 2017-10-31
- 1.2.6 — 2017-10-20
- 1.0.0 — 2017-09-29
- 0.2.5 — 2017-09-28
- 0.2.4 — 2017-09-04
- 0.2.3 — 2017-09-04
- 0.2.2 — 2016-12-27
- 0.2.1 — 2016-12-27
- 0.1.7 — 2016-12-23
- 0.1.6 — 2016-12-20
- 0.1.5 — 2016-12-19
- 0.1.4 — 2016-12-19
- 0.1.3 — 2016-12-19
- 0.1.2 — 2016-12-16
- … 3 more at https://npm.io/package/bee-layout/versions
## README
# bee-layout
[](https://www.npmjs.com/package/bee-layout)
[](https://travis-ci.org/tinper-bee/bee-layout)
[](https://coveralls.io/github/tinper-bee/bee-layout?branch=master)
react bee-layout component for tinper-bee
栅格布局组件，包含container,row和col
## 使用方法
#### 下载npm包
```
npm install --save bee-layout
```
```js
import { Row, Col } from 'bee-layout';
ReactDOM.render(
,
document.body);
```
#### 样式引入
- 可以使用link引入build目录下Layout.css
```
```
- 可以在js中import样式
```js
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的数字。
#### 开发调试
```sh
$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-layout
$ cd bee-layout
$ npm install
$ npm run dev
```
---
_Source: https://npm.io/package/bee-layout · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._