0.1.6 • Published 6 years ago
@materialr/layout-grid v0.1.6
MaterialR Layout Grid
@materialr/layout-grid
Material layout grid implementation for React
Installation
$ npm install --save @materialr/layout-gridDemo
A full demo is available on the MaterialR website showcasing all variants.
Components
Named exports
import { Cell } from '@materialr/layout-grid';Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
align | enum (bottom/middle/top) | No | undefined | The vertical alignment of contents within the cell |
children | node | No | undefined | The children to render within the cell |
className | string | No | undefined | Additional classNames to add to the cell |
columns | enum (1-12) | No | undefined | The column width of the cell |
desktop | enum (1-12) | No | undefined | The column width of the cell on desktop |
phone | enum (1-4) | No | undefined | The column width of the cell on phone |
tablet | enum (1-8) | No | undefined | The column width of the cell on tablet |
import { Grid } from '@materialr/layout-grid';Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
align | enum (left/right) | No | undefined | The horizontal alignment of contents within the grid |
children | node | Yes | undefined | The children to render within the grid |
className | string | No | undefined | Additional classNames to add to the grid |
import { Row } from '@material/layout-grid';Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
children | node | Yes | undefined | The children to render within the row |
className | string | No | undefined | Additional classNames to add to the row |