Skip to content

Commit 6e93319

Browse files
committedOct 27, 2015
adding back grid-list code examples
1 parent 1169058 commit 6e93319

File tree

2 files changed

+70
-70
lines changed

2 files changed

+70
-70
lines changed
 

‎docs/src/app/components/pages/components/grid-list.jsx

+38-70
Original file line numberDiff line numberDiff line change
@@ -5,48 +5,14 @@ let StarBorder = require('svg-icons/toggle/star-border');
55
let IconButton = require('icon-button');
66

77
let ComponentDoc = require('../../component-doc');
8-
8+
let Code = require('grid-list-code');
9+
let CodeExample = require('../../code-example/code-example');
910

1011
class GridListPage extends React.Component {
1112

1213
constructor(props) {
1314
super(props);
1415

15-
this.code = `
16-
{/* Basic grid list with mostly default options */}
17-
<GridList
18-
cellHeight={200}
19-
style={{width: 320, height: 640, overflowY: 'auto'}}
20-
>
21-
{
22-
tilesData.map(tile => <GridTile
23-
title={tile.title}
24-
subtitle={<span>by <b>{tile.author}</b></span>}
25-
actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
26-
><img src={tile.img} /></GridTile>)
27-
}
28-
</GridList>
29-
{/* Grid list with all possible overrides */}
30-
<GridList
31-
cols={2}
32-
cellHeight={200}
33-
padding={1}
34-
style={{width: 320, height: 640, overflowY: 'auto'}}
35-
>
36-
{
37-
tilesData.map(tile => <GridTile
38-
title={tile.title}
39-
actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
40-
actionPosition="left"
41-
titlePosition="top"
42-
titleBackground={gradientBg}
43-
cols={tile.featured ? 2 : 1}
44-
rows={tile.featured ? 2 : 1}
45-
><img src={tile.img} /></GridTile>)
46-
}
47-
</GridList>
48-
`;
49-
5016
this.desc = <p>Simple flex-box based <a
5117
href="https://www.google.com/design/spec/components/grid-lists.html"
5218
>Grid List</a> implementation. Support tiles with arbitrary cell size,
@@ -207,40 +173,42 @@ class GridListPage extends React.Component {
207173
code={this.code}
208174
desc={this.desc}
209175
componentInfo={this.componentInfo}>
210-
<div style={{display: 'flex', flexWrap: 'wrap', justifyContent: 'space-around'}}>
211-
{/* Basic grid list with mostly default options */}
212-
<GridList
213-
cellHeight={200}
214-
style={{width: 320, height: 640, overflowY: 'auto', marginBottom: 24}}
215-
>
216-
{
217-
tilesData.map(tile => <GridTile
218-
title={tile.title}
219-
subtitle={<span>by <b>{tile.author}</b></span>}
220-
actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
221-
><img src={tile.img} /></GridTile>)
222-
}
223-
</GridList>
224-
{/* Grid list with all possible overrides */}
225-
<GridList
226-
cols={2}
227-
cellHeight={200}
228-
padding={1}
229-
style={{width: 320, height: 640, overflowY: 'auto', marginBottom: 24}}
230-
>
231-
{
232-
tilesData.map(tile => <GridTile
233-
title={tile.title}
234-
actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
235-
actionPosition="left"
236-
titlePosition="top"
237-
titleBackground={gradientBg}
238-
cols={tile.featured ? 2 : 1}
239-
rows={tile.featured ? 2 : 1}
240-
><img src={tile.img} /></GridTile>)
241-
}
242-
</GridList>
243-
</div>
176+
<CodeExample code={Code}>
177+
<div style={{display: 'flex', flexWrap: 'wrap', justifyContent: 'space-around'}}>
178+
{/* Basic grid list with mostly default options */}
179+
<GridList
180+
cellHeight={200}
181+
style={{width: 320, height: 640, overflowY: 'auto', marginBottom: 24}}
182+
>
183+
{
184+
tilesData.map(tile => <GridTile
185+
title={tile.title}
186+
subtitle={<span>by <b>{tile.author}</b></span>}
187+
actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
188+
><img src={tile.img} /></GridTile>)
189+
}
190+
</GridList>
191+
{/* Grid list with all possible overrides */}
192+
<GridList
193+
cols={2}
194+
cellHeight={200}
195+
padding={1}
196+
style={{width: 320, height: 640, overflowY: 'auto', marginBottom: 24}}
197+
>
198+
{
199+
tilesData.map(tile => <GridTile
200+
title={tile.title}
201+
actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
202+
actionPosition="left"
203+
titlePosition="top"
204+
titleBackground={gradientBg}
205+
cols={tile.featured ? 2 : 1}
206+
rows={tile.featured ? 2 : 1}
207+
><img src={tile.img} /></GridTile>)
208+
}
209+
</GridList>
210+
</div>
211+
</CodeExample>
244212
</ComponentDoc>
245213
);
246214
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{/* Basic grid list with mostly default options */}
2+
<GridList
3+
cellHeight={200}
4+
style={{width: 320, height: 640, overflowY: 'auto'}}
5+
>
6+
{
7+
tilesData.map(tile => <GridTile
8+
title={tile.title}
9+
subtitle={<span>by <b>{tile.author}</b></span>}
10+
actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
11+
><img src={tile.img} /></GridTile>)
12+
}
13+
</GridList>
14+
{/* Grid list with all possible overrides */}
15+
<GridList
16+
cols={2}
17+
cellHeight={200}
18+
padding={1}
19+
style={{width: 320, height: 640, overflowY: 'auto'}}
20+
>
21+
{
22+
tilesData.map(tile => <GridTile
23+
title={tile.title}
24+
actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
25+
actionPosition="left"
26+
titlePosition="top"
27+
titleBackground={gradientBg}
28+
cols={tile.featured ? 2 : 1}
29+
rows={tile.featured ? 2 : 1}
30+
><img src={tile.img} /></GridTile>)
31+
}
32+
</GridList>

0 commit comments

Comments
 (0)
Please sign in to comment.