# uxcore-grid

> uxcore-grid component for uxcore.

Latest version **1.3.1** (published 2018-09-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install uxcore-grid
pnpm add uxcore-grid
yarn add uxcore-grid
bun add uxcore-grid
```

## 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.3.1 |
| Published | 2018-09-21 |
| First published | 2015-08-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 52.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | eternalky |
| Maintainers | eternalsky, majorye, srhb18, surfacew |
| Keywords | react, react-component, uxcore-grid, Grid |

## Links

- npm: https://www.npmjs.com/package/uxcore-grid
- Repository: https://github.com/uxcore/uxcore-grid
- Homepage: https://github.com/uxcore/uxcore-grid#readme
- Issues: http://github.com/uxcore/uxcore-grid/issues
- npm.io page: https://npm.io/package/uxcore-grid

## Dependencies (4)

- [classnames](https://npm.io/package/classnames.md) ^2.1.2
- [prop-types](https://npm.io/package/prop-types.md) 15.x
- [object-assign](https://npm.io/package/object-assign.md) ^4.0.0
- [react-prop-types](https://npm.io/package/react-prop-types.md) ~0.3.0

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.3.1 (latest) — 2018-09-21
- 1.3.0 — 2017-10-24
- 1.2.2 — 2016-02-28
- 1.2.1 — 2015-11-09
- 1.2.0 — 2015-11-02
- 1.1.1 — 2015-10-15
- 1.1.0 — 2015-10-15
- 1.0.7 — 2015-10-04
- 1.0.6 — 2015-09-25
- 1.0.5 — 2015-09-17
- 1.0.3 — 2015-09-10
- 1.0.2 — 2015-09-10
- 1.0.1 — 2015-09-08
- 1.0.0 — 2015-08-07

## README

---

## uxcore-grid [![Dependency Status](http://img.shields.io/david/uxcore/uxcore-grid.svg?style=flat-square)](https://david-dm.org/uxcore/uxcore-grid) [![devDependency Status](http://img.shields.io/david/dev/uxcore/uxcore-grid.svg?style=flat-square)](https://david-dm.org/uxcore/uxcore-grid#info=devDependencies) 

![](http://gtms01.alicdn.com/tps/i1/TB1OLHQKXXXXXaaXpXXLPUM0VXX-1208-219.png)

## TL;DR

uxcore-grid ui component for react

#### setup develop environment

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

## Usage

```js
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-`|

---
_Source: https://npm.io/package/uxcore-grid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._