bee-layout
[![npm version](https://img.shields.io/npm/v/bee-layout.svg)](https://www.npmjs.com/package/bee-layout) [![Build Status](https://img.shields.io/travis/tinper-bee/bee-layout/master.svg)](https://travis-ci.org/tinper-bee/bee-layout) [![Coverage Status](ht
Last updated 6 months ago by tinper-bot .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install bee-layout 
SYNC missed versions from official npm registry.

bee-layout

npm version Build Status Coverage Status

react bee-layout component for tinper-bee

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

使用方法

下载npm包

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"

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的数字。

开发调试

$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-layout
$ cd bee-layout
$ npm install
$ npm run dev

Current Tags

  • 1.2.8                                ...           latest (6 months ago)

18 Versions

  • 1.2.8                                ...           6 months ago
  • 1.2.7                                ...           3 years ago
  • 1.2.6                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
  • 0.2.5                                ...           3 years ago
  • 0.2.4                                ...           3 years ago
  • 0.2.3                                ...           3 years ago
  • 0.2.2                                ...           4 years ago
  • 0.2.1                                ...           4 years ago
  • 0.1.7                                ...           4 years ago
  • 0.1.6                                ...           4 years ago
  • 0.1.5                                ...           4 years ago
  • 0.1.4                                ...           4 years ago
  • 0.1.3                                ...           4 years ago
  • 0.1.2                                ...           4 years ago
  • 0.1.1                                ...           4 years ago
  • 0.1.0                                ...           4 years ago
  • 0.0.2                                ...           4 years ago

Copyright 2014 - 2017 © taobao.org |