Skip to content

Commit

Permalink
fix(list): updated demo to show checkbox examples
Browse files Browse the repository at this point in the history
  • Loading branch information
Matt Goo committed Jan 23, 2018
1 parent dee5055 commit fa0f58c
Showing 1 changed file with 124 additions and 0 deletions.
124 changes: 124 additions & 0 deletions demos/list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -306,6 +306,68 @@ <h3>Graphic Example - Icon with Text (Dark)</h3>
</li>
</ul>
</section>
<section>
<h3>Checkbox Example - Icon with Text</h3>
<ul class="mdc-list demo-list">
<li class="mdc-list-item">
<span class="mdc-list-item__graphic">
<div class="mdc-checkbox">
<input type="checkbox"
class="mdc-checkbox__native-control"/>
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark"
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark__path"
fill="none"
stroke="white"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
</span>
Blueberries
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__graphic">
<div class="mdc-checkbox">
<input type="checkbox"
class="mdc-checkbox__native-control"/>
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark"
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark__path"
fill="none"
stroke="white"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
</span>
Boysenberries
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__graphic">
<div class="mdc-checkbox">
<input type="checkbox"
class="mdc-checkbox__native-control"/>
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark"
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark__path"
fill="none"
stroke="white"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
</span>
Strawberries
</li>
</ul>
</section>
<section>
<h3>Avatar List</h3>
<ul class="mdc-list mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders">
Expand Down Expand Up @@ -420,6 +482,68 @@ <h3>Metadata (Dense)</h3>
</li>
</ul>
</section>
<section>
<h3>Metadata - Checkbox Example</h3>
<ul class="mdc-list demo-list">
<li class="mdc-list-item">
Blueberries
<span class="mdc-list-item__meta">
<div class="mdc-checkbox">
<input type="checkbox"
class="mdc-checkbox__native-control"/>
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark"
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark__path"
fill="none"
stroke="white"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
</span>
</li>
<li class="mdc-list-item">
Boysenberries
<span class="mdc-list-item__meta">
<div class="mdc-checkbox">
<input type="checkbox"
class="mdc-checkbox__native-control"/>
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark"
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark__path"
fill="none"
stroke="white"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
</span>
</li>
<li class="mdc-list-item">
Strawberries
<span class="mdc-list-item__meta">
<div class="mdc-checkbox">
<input type="checkbox"
class="mdc-checkbox__native-control"/>
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark"
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark__path"
fill="none"
stroke="white"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
</span>
</li>
</ul>
</section>
<section>
<h3>Avatar + Metadata</h3>
<ul class="mdc-list mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders">
Expand Down

0 comments on commit fa0f58c

Please sign in to comment.