Skip to content

Latest commit

 

History

History
119 lines (96 loc) · 3.37 KB

README.md

File metadata and controls

119 lines (96 loc) · 3.37 KB
Raw

React Layout Grid

A React version of an MDC Layout Grid.

Installation

npm install @material/react-layout-grid

Usage

Styles

with Sass:

import '@material/react-layout-grid/index.scss';

with CSS:

import '@material/react-layout-grid/dist/layout-grid.css';

Javascript Instantiation

import React from 'react';
import {Cell, Grid, Row} from '@material/react-layout-grid';

class MyApp extends React.Component {
  render() {
    return (
      <Grid>
        <Row>
          <Cell columns={4}>Tennis</Cell>
          <Cell columns={4}>Cricket</Cell>
          <Cell columns={4}>StarCraft</Cell>
        </Row>
        <Row>
          <Cell desktopColumns={4} order={2} phoneColumns={4} tabletColumns={4}>Tennis</Cell>
          <Cell desktopColumns={4} order={3} phoneColumns={4} tabletColumns={4}>Cricket</Cell>
          <Cell desktopColumns={4} order={1} phoneColumns={4} tabletColumns={4}>StarCraft</Cell>
        </Row>
        <Row>
          <Cell columns={4}>
            <Row>
              <Cell desktopColumns={8} phoneColumns={2} tabletColumns={5}>Tennis</Cell>
              <Cell desktopColumns={4} phoneColumns={2} tabletColumns={3}>Cricket</Cell>
            </Row>
          </Cell>
          <Cell columns={4}> - </Cell>
          <Cell columns={4}> - </Cell>
        </Row>
      </Grid>
    );
  }
}

// with alignment
class MyAppAligned extends React.Component {
  render() {
    return (
      <Grid align="right">
        <Row>
          <Cell align="top">Tennis<br /><br /><br /><br /><br /></Cell>
          <Cell align="middle">Cricket</Cell>
          <Cell align="bottom">StarCraft</Cell>
        </Row>
      </Grid>
    );
  }
}

Components

Grid

Props

Prop Name Type Description
align String (left or right) An optional alignment of the grid contents
children Node A React node to render within the Grid, usually a Row or Rows
className String Classes to be applied to the root element
tag String The tag type to render (default 'div')

Row

Props

Prop Name Type Description
children Node A React node to render within the Row, usually a Cell or Cells
className String Classes to be applied to the root element
tag String The tag type to render (default 'div')

Cell

Props

Prop Name Type Description
align String (bottom, middle or top) An optional alignment of the cell contents
children Node A React node to render within the Cell
className String Classes to be applied to the root element
columns Number (1-12) The width of the cell on all devices
desktopColumns Number (1-12) The width of the cell on desktop
order Number (1-12) The order that the cell is displayed in
phoneColumns Number (1-8) The width of the cell on phones
tabletColumns Number (1-4) The width of the cell on tablets
tag String The tag type to render (default 'div')

Sass Mixins

Sass mixins may be available to customize various aspects of the Components. Please refer to the MDC Web repository for more information on what mixins are available, and how to use them.

Advanced Sass Mixins