1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
import React, { Component } from 'react';
import { Helmet } from 'react-helmet';
import brand from 'ba-api/brand';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import { SourceReader, PapperBlock } from 'ba-components';
import { Grid } from '@material-ui/core';
import {
GridLayout,
FullWidth,
Centered,
Interactive,
AutoLayout,
Limitation
} from './demos';
const styles = ({
root: {
flexGrow: 1,
}
});
class GridPage extends Component {
render() {
const { classes } = this.props;
const title = brand.name + ' - Layout';
const description = brand.desc;
const docSrc = 'containers/Layouts/demos/';
return (
<div>
<Helmet>
<title>{title}</title>
<meta name="description" content={description} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="twitter:title" content={title} />
<meta property="twitter:description" content={description} />
</Helmet>
<PapperBlock title="Grid Spacing" desc="The responsive grid focuses on consistent spacing widths, rather than column width. Material design margins and columns follow an 8dp square baseline grid. Spacing can be 8, 16, 24, or 40dp wide.">
<div>
<GridLayout />
<SourceReader componentName={docSrc + 'GridLayout.js'} />
</div>
</PapperBlock>
<PapperBlock title="Full-width" desc="Full-width grids: use fluid columns and breakpoints to determine when a layout needs to change.">
<div>
<FullWidth />
<SourceReader componentName={docSrc + 'FullWidth.js'} />
</div>
</PapperBlock>
<PapperBlock title="Centered Grid" desc="Centered grids: use fixed columns and re-flow the layout when all columns (plus a defined margin) no longer fit on the screen.">
<div>
<Centered />
<SourceReader componentName={docSrc + 'Centered.js'} />
</div>
</PapperBlock>
<PapperBlock title="Interactive" desc="Below is an interactive demo that lets you explore the visual results of the different settings:">
<div>
<Interactive />
<SourceReader componentName={docSrc + 'Interactive.js'} />
</div>
</PapperBlock>
<div className={classes.root}>
<Grid container spacing={3}>
<Grid item md={6} xs={12}>
<PapperBlock title="Auto Layout" desc="The Auto-layout makes the items equitably share the available space. That also means you can set the width of one item and the others will automatically resize around it.">
<div>
<AutoLayout />
<SourceReader componentName={docSrc + 'AutoLayout.js'} />
</div>
</PapperBlock>
</Grid>
<Grid item md={6} xs={12}>
<PapperBlock title="Limitations" overflowX desc="There is one limitation with the negative margin we use to implement the spacing between items.">
<div>
<Limitation />
<SourceReader componentName={docSrc + 'Limitation.js'} />
</div>
</PapperBlock>
</Grid>
</Grid>
</div>
</div>
);
}
}
GridPage.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(GridPage);
|
