Skip to content

Commit f6de0f5

Browse files
hai-ceahai-cea
committed
[docs] Added more examples to list docs
1 parent 656859d commit f6de0f5

File tree

1 file changed

+181
-30
lines changed
  • docs/src/app/components/pages/components

1 file changed

+181
-30
lines changed

‎docs/src/app/components/pages/components/lists.jsx‎

Lines changed: 181 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -28,20 +28,91 @@ class SnackbarPage extends React.Component {
2828
}
2929

3030
render() {
31-
var code =
32-
'<List>\n' +
33-
' <ListItem leftIcon={<ContentInbox />}>Inbox</ListItem>\n' +
34-
' <ListItem leftIcon={<ActionGrade />}>Starred</ListItem>\n' +
35-
' <ListItem leftIcon={<ContentSend />}>Sent mail</ListItem>\n' +
36-
' <ListItem leftIcon={<ContentDrafts />}>Drafts</ListItem>\n' +
37-
'</List>\n' +
38-
'<ListDivider />\n' +
39-
'<List>\n' +
40-
' <ListItem rightIcon={<ActionInfo />}>All mail</ListItem>\n' +
41-
' <ListItem rightIcon={<ActionInfo />}>Trash</ListItem>\n' +
42-
' <ListItem rightIcon={<ActionInfo />}>Spam</ListItem>\n' +
43-
' <ListItem rightIcon={<ActionInfo />}>Follow up</ListItem>\n' +
44-
'</List>';
31+
32+
var code = `
33+
//First Example
34+
<List>
35+
<ListItem leftIcon={<ContentInbox />}>Inbox</ListItem>
36+
<ListItem leftIcon={<ActionGrade />}>Starred</ListItem>
37+
<ListItem leftIcon={<ContentSend />}>Sent mail</ListItem>
38+
<ListItem leftIcon={<ContentDrafts />}>Drafts</ListItem>
39+
</List>
40+
<ListDivider />
41+
<List>
42+
<ListItem rightIcon={<ActionInfo />}>All mail</ListItem>
43+
<ListItem rightIcon={<ActionInfo />}>Trash</ListItem>
44+
<ListItem rightIcon={<ActionInfo />}>Spam</ListItem>
45+
<ListItem rightIcon={<ActionInfo />}>Follow up</ListItem>
46+
</List>
47+
48+
//Last Example
49+
<List subheader="Today">
50+
<ListItem
51+
leftAvatar={<Avatar src="images/ok-128.jpg" />}
52+
rightIcon={<ToggleStarBorder />}
53+
secondaryText={
54+
<p>
55+
<span style={{color: Colors.darkBlack}}>Brunch this weekend?</span><br/>
56+
I&apos;ll be in your neighborhood doing errands this weekend. Do you want to grab brunch?
57+
</p>
58+
}
59+
secondaryTextLines={2}>
60+
Brendan Lim
61+
</ListItem>
62+
<ListDivider inset={true} />
63+
<ListItem
64+
leftAvatar={<Avatar src="images/kolage-128.jpg" />}
65+
rightIcon={<ToggleStarBorder />}
66+
secondaryText={
67+
<p>
68+
<span style={{color: Colors.darkBlack}}>Summer BBQ</span><br/>
69+
Wish I could come, but I&apos;m out of town this weekend.
70+
</p>
71+
}
72+
secondaryTextLines={2}>
73+
me, Scott, Jennifer
74+
</ListItem>
75+
<ListDivider inset={true} />
76+
<ListItem
77+
leftAvatar={<Avatar src="images/uxceo-128.jpg" />}
78+
rightIcon={<ToggleStarBorder />}
79+
secondaryText={
80+
<p>
81+
<span style={{color: Colors.darkBlack}}>Oui oui</span><br/>
82+
Do you have any Paris recs? Have you ever been?
83+
</p>
84+
}
85+
secondaryTextLines={2}>
86+
Grace Ng
87+
</ListItem>
88+
<ListDivider inset={true} />
89+
<ListItem
90+
leftAvatar={<Avatar src="images/kerem-128.jpg" />}
91+
rightIcon={<ToggleStarBorder />}
92+
secondaryText={
93+
<p>
94+
<span style={{color: Colors.darkBlack}}>Birthday gift</span><br/>
95+
Do you have any ideas what we can get Heidi for her birthday? How about a pony?
96+
</p>
97+
}
98+
secondaryTextLines={2}>
99+
Kerem Suer
100+
</ListItem>
101+
<ListDivider inset={true} />
102+
<ListItem
103+
leftAvatar={<Avatar src="images/raquelromanp-128.jpg" />}
104+
rightIcon={<ToggleStarBorder />}
105+
secondaryText={
106+
<p>
107+
<span style={{color: Colors.darkBlack}}>Recipe to try</span><br/>
108+
We should eat this: grated squash. Corn and tomatillo tacos.
109+
</p>
110+
}
111+
secondaryTextLines={2}>
112+
Raquel Parrado
113+
</ListItem>
114+
</List>
115+
`;
45116

46117
var componentInfo = [
47118
{
@@ -285,37 +356,67 @@ class SnackbarPage extends React.Component {
285356
<List subheader="Today">
286357
<ListItem
287358
leftAvatar={<Avatar src="images/ok-128.jpg" />}
288-
secondaryText={<p><span style={{color: Colors.darkBlack}}>Brendan Lim</span> -- I&apos;ll be in your neighborhood this weekend.</p>}>
359+
secondaryText={
360+
<p>
361+
<span style={{color: Colors.darkBlack}}>Brendan Lim</span> --
362+
I&apos;ll be in your neighborhood this weekend.
363+
</p>
364+
}>
289365
Brunch this weekend?
290366
</ListItem>
291367
<ListDivider inset={true} />
292368
<ListItem
293369
leftAvatar={<Avatar src="images/kolage-128.jpg" />}
294-
secondaryText={<p><span style={{color: Colors.darkBlack}}>to me, Scott, Jennifer</span> -- Wish I could but I can</p>}>
370+
secondaryText={
371+
<p>
372+
<span style={{color: Colors.darkBlack}}>to me, Scott, Jennifer</span> --
373+
Wish I could but I can
374+
</p>
375+
}>
295376
Summer BBQ&nbsp;&nbsp;<span style={{color: Colors.lightBlack}}>4</span>
296377
</ListItem>
297378
<ListDivider inset={true} />
298379
<ListItem
299380
leftAvatar={<Avatar src="images/uxceo-128.jpg" />}
300-
secondaryText={<p><span style={{color: Colors.darkBlack}}>Grace Ng</span> -- Do you have Paris recommendations?</p>}>
381+
secondaryText={
382+
<p>
383+
<span style={{color: Colors.darkBlack}}>Grace Ng</span> --
384+
Do you have Paris recommendations?
385+
</p>
386+
}>
301387
Oui oui
302388
</ListItem>
303389
<ListDivider inset={true} />
304390
<ListItem
305391
leftAvatar={<Avatar src="images/kerem-128.jpg" />}
306-
secondaryText={<p><span style={{color: Colors.darkBlack}}>Kerem Suer</span> -- Do you have any ideas on what I</p>}>
392+
secondaryText={
393+
<p>
394+
<span style={{color: Colors.darkBlack}}>Kerem Suer</span> --
395+
Do you have any ideas on what I
396+
</p>
397+
}>
307398
Birthday gift
308399
</ListItem>
309400
<ListDivider inset={true} />
310401
<ListItem
311402
leftAvatar={<Avatar src="images/raquelromanp-128.jpg" />}
312-
secondaryText={<p><span style={{color: Colors.darkBlack}}>Raquel Parrado</span> -- We should eat this: grated cheese</p>}>
403+
secondaryText={
404+
<p>
405+
<span style={{color: Colors.darkBlack}}>Raquel Parrado</span> --
406+
We should eat this: grated cheese
407+
</p>
408+
}>
313409
Recipe to try
314410
</ListItem>
315411
<ListDivider inset={true} />
316412
<ListItem
317413
leftAvatar={<Avatar src="images/chexee-128.jpg" />}
318-
secondaryText={<p><span style={{color: Colors.darkBlack}}>Chelsea Otakan</span> -- Any interest in seeing the Giants</p>}>
414+
secondaryText={
415+
<p>
416+
<span style={{color: Colors.darkBlack}}>Chelsea Otakan</span> --
417+
Any interest in seeing the Giants
418+
</p>
419+
}>
319420
Giants game
320421
</ListItem>
321422
</List>
@@ -325,35 +426,60 @@ class SnackbarPage extends React.Component {
325426
<List subheader="Today">
326427
<ListItem
327428
leftAvatar={<Avatar src="images/ok-128.jpg" />}
328-
secondaryText={<p><span style={{color: Colors.darkBlack}}>Brendan Lim</span> -- I&apos;ll be in your neighborhood doing errands this weekend. Do you want to grab brunch?</p>}
429+
secondaryText={
430+
<p>
431+
<span style={{color: Colors.darkBlack}}>Brendan Lim</span> --
432+
I&apos;ll be in your neighborhood doing errands this weekend. Do you want to grab brunch?
433+
</p>
434+
}
329435
secondaryTextLines={2}>
330436
Brunch this weekend?
331437
</ListItem>
332438
<ListDivider inset={true} />
333439
<ListItem
334440
leftAvatar={<Avatar src="images/kolage-128.jpg" />}
335-
secondaryText={<p><span style={{color: Colors.darkBlack}}>to me, Scott, Jennifer</span> -- Wish I could come, but I&apos;m out of town this weekend.</p>}
441+
secondaryText={
442+
<p>
443+
<span style={{color: Colors.darkBlack}}>to me, Scott, Jennifer</span> --
444+
Wish I could come, but I&apos;m out of town this weekend.
445+
</p>
446+
}
336447
secondaryTextLines={2}>
337448
Summer BBQ&nbsp;&nbsp;<span style={{color: Colors.lightBlack}}>4</span>
338449
</ListItem>
339450
<ListDivider inset={true} />
340451
<ListItem
341452
leftAvatar={<Avatar src="images/uxceo-128.jpg" />}
342-
secondaryText={<p><span style={{color: Colors.darkBlack}}>Grace Ng</span> -- Do you have Paris recommendations? Have you ever been?</p>}
453+
secondaryText={
454+
<p>
455+
<span style={{color: Colors.darkBlack}}>Grace Ng</span> --
456+
Do you have Paris recommendations? Have you ever been?
457+
</p>
458+
}
343459
secondaryTextLines={2}>
344460
Oui oui
345461
</ListItem>
346462
<ListDivider inset={true} />
347463
<ListItem
348464
leftAvatar={<Avatar src="images/kerem-128.jpg" />}
349-
secondaryText={<p><span style={{color: Colors.darkBlack}}>Kerem Suer</span> -- Do you have any ideas what we can get Heidi for her birthday? How about a pony?</p>}
465+
secondaryText={
466+
<p>
467+
<span style={{color: Colors.darkBlack}}>Kerem Suer</span> --
468+
Do you have any ideas what we can get Heidi for her birthday? How about a pony?
469+
</p>
470+
}
350471
secondaryTextLines={2}>
351472
Birthday gift
352473
</ListItem>
353474
<ListDivider inset={true} />
354475
<ListItem
355476
leftAvatar={<Avatar src="images/raquelromanp-128.jpg" />}
356-
secondaryText={<p><span style={{color: Colors.darkBlack}}>Raquel Parrado</span> -- We should eat this: grated squash. Corn and tomatillo tacos.</p>}
477+
secondaryText={
478+
<p>
479+
<span style={{color: Colors.darkBlack}}>Raquel Parrado</span> --
480+
We should eat this: grated squash. Corn and tomatillo tacos.
481+
</p>
482+
}
357483
secondaryTextLines={2}>
358484
Recipe to try
359485
</ListItem>
@@ -365,39 +491,64 @@ class SnackbarPage extends React.Component {
365491
<ListItem
366492
leftAvatar={<Avatar src="images/ok-128.jpg" />}
367493
rightIcon={<ToggleStarBorder />}
368-
secondaryText={<p><span style={{color: Colors.darkBlack}}>Brunch this weekend?</span><br/>I&apos;ll be in your neighborhood doing errands this weekend. Do you want to grab brunch?</p>}
494+
secondaryText={
495+
<p>
496+
<span style={{color: Colors.darkBlack}}>Brunch this weekend?</span><br/>
497+
I&apos;ll be in your neighborhood doing errands this weekend. Do you want to grab brunch?
498+
</p>
499+
}
369500
secondaryTextLines={2}>
370501
Brendan Lim
371502
</ListItem>
372503
<ListDivider inset={true} />
373504
<ListItem
374505
leftAvatar={<Avatar src="images/kolage-128.jpg" />}
375506
rightIcon={<ToggleStarBorder />}
376-
secondaryText={<p><span style={{color: Colors.darkBlack}}>Summer BBQ</span><br/>Wish I could come, but I&apos;m out of town this weekend.</p>}
507+
secondaryText={
508+
<p>
509+
<span style={{color: Colors.darkBlack}}>Summer BBQ</span><br/>
510+
Wish I could come, but I&apos;m out of town this weekend.
511+
</p>
512+
}
377513
secondaryTextLines={2}>
378514
me, Scott, Jennifer
379515
</ListItem>
380516
<ListDivider inset={true} />
381517
<ListItem
382518
leftAvatar={<Avatar src="images/uxceo-128.jpg" />}
383519
rightIcon={<ToggleStarBorder />}
384-
secondaryText={<p><span style={{color: Colors.darkBlack}}>Oui oui</span><br/>Do you have any Paris recs? Have you ever been?</p>}
520+
secondaryText={
521+
<p>
522+
<span style={{color: Colors.darkBlack}}>Oui oui</span><br/>
523+
Do you have any Paris recs? Have you ever been?
524+
</p>
525+
}
385526
secondaryTextLines={2}>
386527
Grace Ng
387528
</ListItem>
388529
<ListDivider inset={true} />
389530
<ListItem
390531
leftAvatar={<Avatar src="images/kerem-128.jpg" />}
391532
rightIcon={<ToggleStarBorder />}
392-
secondaryText={<p><span style={{color: Colors.darkBlack}}>Birthday gift</span><br/>Do you have any ideas what we can get Heidi for her birthday? How about a pony?</p>}
533+
secondaryText={
534+
<p>
535+
<span style={{color: Colors.darkBlack}}>Birthday gift</span><br/>
536+
Do you have any ideas what we can get Heidi for her birthday? How about a pony?
537+
</p>
538+
}
393539
secondaryTextLines={2}>
394540
Kerem Suer
395541
</ListItem>
396542
<ListDivider inset={true} />
397543
<ListItem
398544
leftAvatar={<Avatar src="images/raquelromanp-128.jpg" />}
399545
rightIcon={<ToggleStarBorder />}
400-
secondaryText={<p><span style={{color: Colors.darkBlack}}>Recipe to try</span><br/>We should eat this: grated squash. Corn and tomatillo tacos.</p>}
546+
secondaryText={
547+
<p>
548+
<span style={{color: Colors.darkBlack}}>Recipe to try</span><br/>
549+
We should eat this: grated squash. Corn and tomatillo tacos.
550+
</p>
551+
}
401552
secondaryTextLines={2}>
402553
Raquel Parrado
403554
</ListItem>

0 commit comments

Comments
 (0)