---

uxcore-grid

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-