@@ -5,48 +5,14 @@ let StarBorder = require('svg-icons/toggle/star-border');
5
5
let IconButton = require ( 'icon-button' ) ;
6
6
7
7
let ComponentDoc = require ( '../../component-doc' ) ;
8
-
8
+ let Code = require ( 'grid-list-code' ) ;
9
+ let CodeExample = require ( '../../code-example/code-example' ) ;
9
10
10
11
class GridListPage extends React . Component {
11
12
12
13
constructor ( props ) {
13
14
super ( props ) ;
14
15
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
-
50
16
this . desc = < p > Simple flex-box based < a
51
17
href = "https://www.google.com/design/spec/components/grid-lists.html"
52
18
> Grid List</ a > implementation. Support tiles with arbitrary cell size,
@@ -207,40 +173,42 @@ class GridListPage extends React.Component {
207
173
code = { this . code }
208
174
desc = { this . desc }
209
175
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 >
244
212
</ ComponentDoc >
245
213
) ;
246
214
}
0 commit comments