predix-ui
Version:
px-* web components as React styled components
79 lines (67 loc) • 2.46 kB
Markdown
The `<Grid/>` component provides a way to create a flexible layout grid.
## Usage
```react
const { Grid } = PxReact;
<Grid container middle>
<Grid item>
This is the children
</Grid>
<Grid item>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</Grid>
</Grid>
```
## Sizing
```react
const { Grid } = PxReact;
const classes = {
paper: {
backgroundColor: 'white',
padding: 16,
textAlign: 'center',
color: 'blue'
}
}
const Paper = (props) => (
<div style={props.className}>{props.children}</div>
);
<Grid container spacing={24}>
<Grid item xs={12}>
<Paper className={classes.paper}>xs=12</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper className={classes.paper}>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper className={classes.paper}>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper className={classes.paper}>xs=6 sm=3</Paper>
</Grid>
</Grid>
```
```react
const { Grid } = PxReact;
<Grid container bottom>
<Grid item>Item 1</Grid>
<Grid item>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</Grid>
<Grid item>Item 3</Grid>
</Grid>
```
## Props
```table
span: 6
rows:
- Name: label
Type: String
Description: This is the desc
```