Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit fa0f58c

Browse files
author
Matt Goo
committed
fix(list): updated demo to show checkbox examples
1 parent dee5055 commit fa0f58c

File tree

1 file changed

+124
-0
lines changed

1 file changed

+124
-0
lines changed

‎demos/list.html

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -306,6 +306,68 @@ <h3>Graphic Example - Icon with Text (Dark)</h3>
306306
</li>
307307
</ul>
308308
</section>
309+
<section>
310+
<h3>Checkbox Example - Icon with Text</h3>
311+
<ul class="mdc-list demo-list">
312+
<li class="mdc-list-item">
313+
<span class="mdc-list-item__graphic">
314+
<div class="mdc-checkbox">
315+
<input type="checkbox"
316+
class="mdc-checkbox__native-control"/>
317+
<div class="mdc-checkbox__background">
318+
<svg class="mdc-checkbox__checkmark"
319+
viewBox="0 0 24 24">
320+
<path class="mdc-checkbox__checkmark__path"
321+
fill="none"
322+
stroke="white"
323+
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
324+
</svg>
325+
<div class="mdc-checkbox__mixedmark"></div>
326+
</div>
327+
</div>
328+
</span>
329+
Blueberries
330+
</li>
331+
<li class="mdc-list-item">
332+
<span class="mdc-list-item__graphic">
333+
<div class="mdc-checkbox">
334+
<input type="checkbox"
335+
class="mdc-checkbox__native-control"/>
336+
<div class="mdc-checkbox__background">
337+
<svg class="mdc-checkbox__checkmark"
338+
viewBox="0 0 24 24">
339+
<path class="mdc-checkbox__checkmark__path"
340+
fill="none"
341+
stroke="white"
342+
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
343+
</svg>
344+
<div class="mdc-checkbox__mixedmark"></div>
345+
</div>
346+
</div>
347+
</span>
348+
Boysenberries
349+
</li>
350+
<li class="mdc-list-item">
351+
<span class="mdc-list-item__graphic">
352+
<div class="mdc-checkbox">
353+
<input type="checkbox"
354+
class="mdc-checkbox__native-control"/>
355+
<div class="mdc-checkbox__background">
356+
<svg class="mdc-checkbox__checkmark"
357+
viewBox="0 0 24 24">
358+
<path class="mdc-checkbox__checkmark__path"
359+
fill="none"
360+
stroke="white"
361+
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
362+
</svg>
363+
<div class="mdc-checkbox__mixedmark"></div>
364+
</div>
365+
</div>
366+
</span>
367+
Strawberries
368+
</li>
369+
</ul>
370+
</section>
309371
<section>
310372
<h3>Avatar List</h3>
311373
<ul class="mdc-list mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders">
@@ -420,6 +482,68 @@ <h3>Metadata (Dense)</h3>
420482
</li>
421483
</ul>
422484
</section>
485+
<section>
486+
<h3>Metadata - Checkbox Example</h3>
487+
<ul class="mdc-list demo-list">
488+
<li class="mdc-list-item">
489+
Blueberries
490+
<span class="mdc-list-item__meta">
491+
<div class="mdc-checkbox">
492+
<input type="checkbox"
493+
class="mdc-checkbox__native-control"/>
494+
<div class="mdc-checkbox__background">
495+
<svg class="mdc-checkbox__checkmark"
496+
viewBox="0 0 24 24">
497+
<path class="mdc-checkbox__checkmark__path"
498+
fill="none"
499+
stroke="white"
500+
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
501+
</svg>
502+
<div class="mdc-checkbox__mixedmark"></div>
503+
</div>
504+
</div>
505+
</span>
506+
</li>
507+
<li class="mdc-list-item">
508+
Boysenberries
509+
<span class="mdc-list-item__meta">
510+
<div class="mdc-checkbox">
511+
<input type="checkbox"
512+
class="mdc-checkbox__native-control"/>
513+
<div class="mdc-checkbox__background">
514+
<svg class="mdc-checkbox__checkmark"
515+
viewBox="0 0 24 24">
516+
<path class="mdc-checkbox__checkmark__path"
517+
fill="none"
518+
stroke="white"
519+
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
520+
</svg>
521+
<div class="mdc-checkbox__mixedmark"></div>
522+
</div>
523+
</div>
524+
</span>
525+
</li>
526+
<li class="mdc-list-item">
527+
Strawberries
528+
<span class="mdc-list-item__meta">
529+
<div class="mdc-checkbox">
530+
<input type="checkbox"
531+
class="mdc-checkbox__native-control"/>
532+
<div class="mdc-checkbox__background">
533+
<svg class="mdc-checkbox__checkmark"
534+
viewBox="0 0 24 24">
535+
<path class="mdc-checkbox__checkmark__path"
536+
fill="none"
537+
stroke="white"
538+
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
539+
</svg>
540+
<div class="mdc-checkbox__mixedmark"></div>
541+
</div>
542+
</div>
543+
</span>
544+
</li>
545+
</ul>
546+
</section>
423547
<section>
424548
<h3>Avatar + Metadata</h3>
425549
<ul class="mdc-list mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders">

0 commit comments

Comments
 (0)