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

Commit

Permalink
feat(list): Toggle radio checkbox (#3546)
Browse files Browse the repository at this point in the history
  • Loading branch information
@williamernest
williamernest authored Sep 20, 2018
1 parent 26f6699 commit f59b6e6
Show file tree
Hide file tree
Showing 16 changed files with 432 additions and 343 deletions.
310 changes: 176 additions & 134 deletions demos/list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -379,69 +379,126 @@ <h3>Leading Checkbox</h3>
<ul class="mdc-list demo-list" id="leading-checkbox-list"
aria-orientation="vertical">
<li class="mdc-list-item checkbox-list-ripple-surface" tabindex="0">
<span class="mdc-list-item__graphic">
<div class="mdc-checkbox">
<input type="checkbox"
class="mdc-checkbox__native-control"
id="leading-checkbox-blueberries"/>
<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>
<span class="mdc-list-item__text">
<label for="leading-checkbox-blueberries">Blueberries</label>
<div class="mdc-list-item__graphic">
<div class="mdc-checkbox">
<input type="checkbox"
class="mdc-checkbox__native-control"
id="leading-checkbox-blueberries"
title="Blueberries"
aria-label="Blueberries"/>
<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>
</div>
<span class="mdc-list-item__text">
Blueberries
</span>
</li>
<li class="mdc-list-item checkbox-list-ripple-surface">
<span class="mdc-list-item__graphic">
<div class="mdc-checkbox">
<input type="checkbox"
class="mdc-checkbox__native-control"
id="leading-checkbox-boysenberries"/>
<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>
<span class="mdc-list-item__text">
<label for="leading-checkbox-boysenberries">Boysenberries</label>
<div class="mdc-list-item__graphic">
<div class="mdc-checkbox">
<input type="checkbox"
class="mdc-checkbox__native-control"
id="leading-checkbox-boysenberries"
title="Boysenberries"
aria-label="Boysenberries"/>
<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>
</div>
<span class="mdc-list-item__text">
Boysenberries
</span>
</li>
<li class="mdc-list-item checkbox-list-ripple-surface">
<span class="mdc-list-item__graphic">
<div class="mdc-checkbox">
<input type="checkbox"
class="mdc-checkbox__native-control"
id="leading-checkbox-strawberries"/>
<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>
<span class="mdc-list-item__text">
<label for="leading-checkbox-strawberries">Strawberries</label>
<div class="mdc-list-item__graphic">
<div class="mdc-checkbox">
<input type="checkbox"
class="mdc-checkbox__native-control"
id="leading-checkbox-strawberries"
title="Strawberries"
aria-label="Strawberries"/>
<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>
</div>
<span class="mdc-list-item__text">
Strawberries
</span>
</li>
</ul>
</section>
<section>
<h3>Leading Radio Buttons</h3>
<ul class="mdc-list demo-list" id="leading-radio-list"
aria-orientation="vertical">
<li class="mdc-list-item checkbox-list-ripple-surface" tabindex="0">
<div class="mdc-list-item__graphic">
<div class="mdc-radio">
<input class="mdc-radio__native-control" type="radio" id="leading-radio-blueberries" name="radios"
title="Blueberries" aria-label="Blueberries">
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
</div>
<span class="mdc-list-item__text">
Blueberries
</span>
</li>
<li class="mdc-list-item checkbox-list-ripple-surface">
<div class="mdc-list-item__graphic">
<div class="mdc-radio">
<input class="mdc-radio__native-control" type="radio" id="leading-radio-boysenberries" name="radios"
checked title="Boysenberries" aria-label="Boysenberries">
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
</div>
<span class="mdc-list-item__text">
Boysenberries
</span>
</li>
<li class="mdc-list-item checkbox-list-ripple-surface">
<div class="mdc-list-item__graphic">
<div class="mdc-radio">
<input class="mdc-radio__native-control" type="radio" id="leading-radio-strawberries" name="radios"
title="Strawberries" aria-label="Strawberries">
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
</div>
<span class="mdc-list-item__text">
Strawberries
</span>
</li>
</ul>
Expand Down Expand Up @@ -578,68 +635,74 @@ <h3>Trailing Checkbox</h3>
aria-orientation="vertical">
<li class="mdc-list-item checkbox-list-ripple-surface" tabindex="0">
<span class="mdc-list-item__text">
<label for="trailing-checkbox-blueberries">Blueberries</label>
</span>
<span class="mdc-list-item__meta">
<div class="mdc-checkbox">
<input type="checkbox"
class="mdc-checkbox__native-control"
id="trailing-checkbox-blueberries"/>
<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
</span>
<div class="mdc-list-item__meta">
<div class="mdc-checkbox">
<input type="checkbox"
class="mdc-checkbox__native-control"
id="trailing-checkbox-blueberries"
title="Blueberries"
aria-label="Blueberries"/>
<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>
</div>
</li>
<li class="mdc-list-item checkbox-list-ripple-surface">
<span class="mdc-list-item__text">
<label for="trailing-checkbox-boysenberries">Boysenberries</label>
</span>
<span class="mdc-list-item__meta">
<div class="mdc-checkbox">
<input type="checkbox"
class="mdc-checkbox__native-control"
id="trailing-checkbox-boysenberries"/>
<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
</span>
<div class="mdc-list-item__meta">
<div class="mdc-checkbox">
<input type="checkbox"
class="mdc-checkbox__native-control"
id="trailing-checkbox-boysenberries"
title="Boysenberries"
aria-label="Boysenberries"/>
<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>
</div>
</li>
<li class="mdc-list-item checkbox-list-ripple-surface">
<span class="mdc-list-item__text">
<label for="trailing-checkbox-strawberries">Strawberries</label>
</span>
<span class="mdc-list-item__meta">
<div class="mdc-checkbox">
<input type="checkbox"
class="mdc-checkbox__native-control"
id="trailing-checkbox-strawberries"/>
<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
</span>
<div class="mdc-list-item__meta">
<div class="mdc-checkbox">
<input type="checkbox"
class="mdc-checkbox__native-control"
id="trailing-checkbox-strawberries"
title="Strawberries"
aria-label="Strawberries"/>
<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>
</div>
</li>
</ul>
</section>
Expand Down Expand Up @@ -1330,31 +1393,10 @@ <h3>Example - Interactive List</h3>
});
}

function clickHandler(evt, li) {
if (evt.target === li) {
var checkbox = li.querySelector('.mdc-checkbox__native-control');
checkbox.checked = !checkbox.checked;
}
};

function addRippleToListItems(list) {
var listItems = list.querySelectorAll('.mdc-list-item');

[].forEach.call(listItems, function(li) {
mdc.ripple.MDCRipple.attachTo(li);
li.addEventListener('click', function(e) {
clickHandler(e, li);
});
});
};

[].slice.call(document.querySelectorAll('.mdc-list')).forEach(function(ele) {
var list = mdc.list.MDCList.attachTo(ele);
list.wrapFocus = true;
});

addRippleToListItems(document.getElementById('leading-checkbox-list'));
addRippleToListItems(document.getElementById('trailing-checkbox-list'));
});
</script>
</body>
Expand Down
1 change: 1 addition & 0 deletions demos/list.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@

@import "./common";
@import "../packages/mdc-checkbox/mdc-checkbox";
@import "../packages/mdc-radio/mdc-radio";
@import "../packages/mdc-elevation/mixins";
@import "../packages/mdc-form-field/mdc-form-field";
@import "../packages/mdc-list/mdc-list";
Expand Down
Loading

0 comments on commit f59b6e6

Please sign in to comment.