Skip to content

Commit a2c6937

Browse files
oliviertassinarioliviertassinari
authored
[Grid] Document the nested capability (#12313)
1 parent ca47fbf commit a2c6937

File tree

6 files changed

+169
-4
lines changed

6 files changed

+169
-4
lines changed

‎docs/src/pages/layout/grid/ComplexGrid.js

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { withStyles } from '@material-ui/core/styles';
4+
import Grid from '@material-ui/core/Grid';
5+
import Paper from '@material-ui/core/Paper';
6+
import Typography from '@material-ui/core/Typography';
7+
import ButtonBase from '@material-ui/core/ButtonBase';
8+
9+
const styles = theme => ({
10+
root: {
11+
flexGrow: 1,
12+
maxWidth: 600,
13+
padding: theme.spacing.unit * 2,
14+
},
15+
image: {
16+
width: 128,
17+
height: 128,
18+
},
19+
img: {
20+
margin: 'auto',
21+
display: 'block',
22+
maxWidth: '100%',
23+
maxHeight: '100%',
24+
},
25+
});
26+
27+
function ComplexGrid(props) {
28+
const { classes } = props;
29+
return (
30+
<Paper className={classes.root}>
31+
<Grid container spacing={16}>
32+
<Grid item>
33+
<ButtonBase className={classes.image}>
34+
<img className={classes.img} alt="complex" src="/static/images/grid/complex.jpg" />
35+
</ButtonBase>
36+
</Grid>
37+
<Grid item xs={12} sm container>
38+
<Grid item xs container direction="column" spacing={16}>
39+
<Grid item xs>
40+
<Typography gutterBottom variant="subheading">
41+
Standard license
42+
</Typography>
43+
<Typography gutterBottom>Full resolution 1920x1080 • JPEG</Typography>
44+
<Typography color="textSecondary">ID: 1030114</Typography>
45+
</Grid>
46+
<Grid item>
47+
<Typography style={{ cursor: 'pointer' }}>Remove</Typography>
48+
</Grid>
49+
</Grid>
50+
<Grid item>
51+
<Typography variant="subheading">$19.00</Typography>
52+
</Grid>
53+
</Grid>
54+
</Grid>
55+
</Paper>
56+
);
57+
}
58+
59+
ComplexGrid.propTypes = {
60+
classes: PropTypes.object.isRequired,
61+
};
62+
63+
export default withStyles(styles)(ComplexGrid);

‎docs/src/pages/layout/grid/InteractiveGrid.js

+12-4
Original file line numberDiff line numberDiff line change
@@ -67,11 +67,12 @@ class InteractiveGrid extends React.Component {
6767
</Grid>
6868
<Grid item xs={12}>
6969
<Paper className={classes.control}>
70-
<Grid container>
71-
<Grid item xs={6} sm={4}>
70+
<Grid container spacing={24}>
71+
<Grid item xs={12}>
7272
<FormControl component="fieldset">
7373
<FormLabel>direction</FormLabel>
7474
<RadioGroup
75+
row
7576
name="direction"
7677
aria-label="Direction"
7778
value={direction}
@@ -88,10 +89,11 @@ class InteractiveGrid extends React.Component {
8889
</RadioGroup>
8990
</FormControl>
9091
</Grid>
91-
<Grid item xs={6} sm={4}>
92+
<Grid item xs={12}>
9293
<FormControl component="fieldset">
9394
<FormLabel>justify</FormLabel>
9495
<RadioGroup
96+
row
9597
name="justify"
9698
aria-label="Justify"
9799
value={justify}
@@ -110,13 +112,19 @@ class InteractiveGrid extends React.Component {
110112
control={<Radio />}
111113
label="space-around"
112114
/>
115+
<FormControlLabel
116+
value="space-evenly"
117+
control={<Radio />}
118+
label="space-evenly"
119+
/>
113120
</RadioGroup>
114121
</FormControl>
115122
</Grid>
116-
<Grid item xs={6} sm={4}>
123+
<Grid item xs={12}>
117124
<FormControl component="fieldset">
118125
<FormLabel>alignItems</FormLabel>
119126
<RadioGroup
127+
row
120128
name="alignItems"
121129
aria-label="Align items"
122130
value={alignItems}

‎docs/src/pages/layout/grid/NestedGrid.js

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { withStyles } from '@material-ui/core/styles';
4+
import Paper from '@material-ui/core/Paper';
5+
import Grid from '@material-ui/core/Grid';
6+
7+
const styles = theme => ({
8+
root: {
9+
flexGrow: 1,
10+
},
11+
paper: {
12+
padding: theme.spacing.unit,
13+
textAlign: 'center',
14+
color: theme.palette.text.secondary,
15+
},
16+
});
17+
18+
function FormRow(props) {
19+
const { classes } = props;
20+
21+
return (
22+
<React.Fragment>
23+
<Grid item xs={4}>
24+
<Paper className={classes.paper}>item</Paper>
25+
</Grid>
26+
<Grid item xs={4}>
27+
<Paper className={classes.paper}>item</Paper>
28+
</Grid>
29+
<Grid item xs={4}>
30+
<Paper className={classes.paper}>item</Paper>
31+
</Grid>
32+
</React.Fragment>
33+
);
34+
}
35+
36+
FormRow.propTypes = {
37+
classes: PropTypes.object.isRequired,
38+
};
39+
40+
function NestedGrid(props) {
41+
const { classes } = props;
42+
43+
return (
44+
<div className={classes.root}>
45+
<Grid container spacing={8}>
46+
<Grid item xs={12} container spacing={24}>
47+
<FormRow classes={classes} />
48+
</Grid>
49+
<Grid item xs={12} container spacing={24}>
50+
<FormRow classes={classes} />
51+
</Grid>
52+
<Grid item xs={12} container spacing={24}>
53+
<FormRow classes={classes} />
54+
</Grid>
55+
</Grid>
56+
</div>
57+
);
58+
}
59+
60+
NestedGrid.propTypes = {
61+
classes: PropTypes.object.isRequired,
62+
};
63+
64+
export default withStyles(styles)(NestedGrid);

‎docs/src/pages/layout/grid/grid.md

+16
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,22 @@ Unfortunately, CSS grid is only supported by the most recent browsers.
6363

6464
{{"demo": "pages/layout/grid/CSSGrid.js"}}
6565

66+
## Nested Grid
67+
68+
The `container` and `item` properties are two independant boolean. They can be combined.
69+
70+
> A flex **container** is the box generated by an element with a computed display of `flex` or `inline-flex`. In-flow children of a flex container are called flex **items** and are laid out using the flex layout model.
71+
72+
https://www.w3.org/TR/css-flexbox-1/#box-model
73+
74+
{{"demo": "pages/layout/grid/NestedGrid.js"}}
75+
76+
## Complex Grid
77+
78+
The following demo doesn't follow the Material Design specification, but illustrates how the grid can be used to build complex layouts.
79+
80+
{{"demo": "pages/layout/grid/ComplexGrid.js"}}
81+
6682
## Limitations
6783

6884
### Negative margin

‎pages/layout/grid.js

+14
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,20 @@ module.exports = require('fs')
4848
raw: preval`
4949
module.exports = require('fs')
5050
.readFileSync(require.resolve('docs/src/pages/layout/grid/CSSGrid'), 'utf8')
51+
`,
52+
},
53+
'pages/layout/grid/NestedGrid.js': {
54+
js: require('docs/src/pages/layout/grid/NestedGrid').default,
55+
raw: preval`
56+
module.exports = require('fs')
57+
.readFileSync(require.resolve('docs/src/pages/layout/grid/NestedGrid'), 'utf8')
58+
`,
59+
},
60+
'pages/layout/grid/ComplexGrid.js': {
61+
js: require('docs/src/pages/layout/grid/ComplexGrid').default,
62+
raw: preval`
63+
module.exports = require('fs')
64+
.readFileSync(require.resolve('docs/src/pages/layout/grid/ComplexGrid'), 'utf8')
5165
`,
5266
},
5367
'pages/layout/grid/AutoGridNoWrap.js': {

‎static/images/grid/complex.jpg

12.2 KB
Loading

0 commit comments

Comments
 (0)