Uxcore-grid NPM

uxcore-grid

npm.io

TL;DR

uxcore-grid ui component for react

setup develop environment

$ git clone https://github.com/uxcore/uxcore-grid
$ cd uxcore-grid
$ npm install
$ gulp server

Usage

let Grid = require('uxcore-grid');
let {Row, Col} = Grid;
<Grid>
    <Row className="show-grid">
        <Col xs={12} md={8}><code>&lt;{'Col xs={12} md={8}'} /&gt;</code></Col>
        <Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
    </Row>

    <Row className="show-grid">
        <Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
        <Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
        <Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
    </Row>

    <Row className="show-grid">
         <Col xs={6} xsOffset={6}><code>&lt;{'Col xs={6} xsOffset={6}'} /&gt;</code></Col>
    </Row>

    <Row className="show-grid">
        <Col md={6} mdPush={6}><code>&lt;{'Col md={6} mdPush={6}'} /&gt;</code></Col>
        <Col md={6} mdPull={6}><code>&lt;{'Col md={6} mdPull={6}'} /&gt;</code></Col>
    </Row>
</Grid>

demo

http://uxcore.github.io/

API

Props

Grid

配置项	类型	必填	默认值	功能/备注
componentClass	elementType	optional	'div'	You can use a custom element for this component
fluid	boolean	optional	false	Turn any fixed-width grid layout into a full-width layout by this property. Adds `container-fluid` class.

Row

通过 Grid.Row 取得。

配置项	类型	必填	默认值	功能/备注
componentClass	elementType	optional	'div'	You can use a custom element for this component

Col

通过 Grid.Col 取得。

配置项	类型	功能/备注
lg	number	The number of columns you wish to span for Large devices Desktops (≥1200px) `class-prefix col-lg-`
lgOffset	number	Move columns to the right for Large devices Desktops `class-prefix col-lg-offset-`
lgPull	number	Change the order of grid columns to the left for Large devices Desktops `class-prefix col-lg-pull-`
lgPush	number	Change the order of grid columns to the right for Large devices Desktops `class-prefix col-lg-push-`
md	number	The number of columns you wish to span for Medium devices Desktops (≥992px) `class-prefix col-md-`
mdOffset	number	Move columns to the right for Medium devices Desktops `class-prefix col-md-offset-`
mdPull	number	Change the order of grid columns to the left for Medium devices Desktops `class-prefix col-md-pull-`
mdPush	number	Change the order of grid columns to the right for Medium devices Desktops `class-prefix col-md-push-`
sm	number	The number of columns you wish to span for Small devices Tablets (≥768px) `class-prefix col-sm-`
smOffset	number	Move columns to the right for Small devices Tablets `class-prefix col-sm-offset-`
smPull	number	Change the order of grid columns to the left for Small devices Tablets `class-prefix col-sm-pull-`
smPush	number	Change the order of grid columns to the right for Small devices Tablets `class-prefix col-sm-push-`
xs	number	The number of columns you wish to span for Extra small devices Phones (<768px) `class-prefix col-xs-`
xsOffset	number	Move columns to the right for Extra small devices Phones `class-prefix col-xs-offset-`
xsPull	number	Change the order of grid columns to the left for Extra small devices Phones `class-prefix col-xs-pull-`
xsPush	number	Change the order of grid columns to the right for Extra small devices Phones `class-prefix col-xs-push-`