Next Planet of Monkeys

    bee-layout

    1.2.8 • Public • Published

    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

    Install

    npm i bee-layout

    DownloadsWeekly Downloads

    342

    Version

    1.2.8

    License

    MIT

    Unpacked Size

    42.2 kB

    Total Files

    20

    Last publish

    Collaborators

    • honely1314
    • xiaoshutong
    • yonyoufed
    • jonyw
    • guoyongfeng
    • kvkens
    • whizbz
    • npm_yx
    • bjyxszd
    • tinper-bot
    • houjitong
    • gaox2025f
    • gcht163
    • cnkvkens
    • diozhu
    • wangjings123
    • boyuzhou
    • ahua52