google/material-design-lite
1
1
Fork 0
mirror of https://github.com/google/material-design-lite.git synced 2024-09-11 12:25:38 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #4055 from google/list-docs

Browse Source 
Adding list docs.
This commit is contained in:
Jonathan Garbee 2016-02-01 11:46:27 -05:00
commit 6bd393382f
9 changed files with 236 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/_assets/comp_lists.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

25
docs/_pages/components.md
View File

@ -185,6 +185,31 @@ categories:
- caption: Mini footer
file: mini-footer.html
full_width: true
- name: lists
title: Lists
description: Customizable scrollable lists.
components:
- name: list
class: mdl-list
snippets:
- snippet_group:
- caption: Action
file: action.html
- snippet_group:
- caption: Icon
file: icon.html
- snippet_group:
- caption: List control
file: list-control.html
- snippet_group:
- caption: List item
file: list-item.html
- snippet_group:
- caption: Two line
file: two-line.html
- snippet_group:
- caption: Three line
file: three-line.html
- name: loading
title: Loading
description: Indicate loading and progress states.

2
src/list/_list.scss
View File

@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import "../variables";
@import "../mixins";

59
src/list/snippets/action.html
View File

@ -1,32 +1,35 @@
<!-- List Items with action -->
<div class="mdl-cell mdl-cell--6-col">
<h4> List Actions </h4>
<div class="mdl-list">
<div class="mdl-list__item mdl-list__item-two-line ">
<span class="mdl-list__item-primary-content">
<i class="material-icons ">person</i>
<span class=mdl-list__item-title>Bryan Cranston</span>
<span class="mdl-list__item-sub-title">62 Episodes</span>
</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
</div>
<div class="mdl-list__item mdl-list__item-two-line ">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
<span class=mdl-list__item-title>Aaron Paul</span>
<span class="mdl-list__item-sub-title">62 Episodes</span>
</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
</div>
<div class="mdl-list__item mdl-list__item-two-line ">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
<span class=mdl-list__item-title>Bob Odenkirk</span>
<span class="mdl-list__item-sub-title">43 Episodes</span>
</span>
<span class="mdl-list__item-secondary-content">
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
<style>
.demo-list-action {
width: 300px;
}
</style>
<div class="demo-list-action mdl-list">
<div class="mdl-list__item mdl-list__item-two-line ">
<span class="mdl-list__item-primary-content">
<i class="material-icons ">person</i>
<span class=mdl-list__item-title>Bryan Cranston</span>
<span class="mdl-list__item-sub-title">62 Episodes</span>
</span>
</div>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
</div>
<div class="mdl-list__item mdl-list__item-two-line ">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
<span class=mdl-list__item-title>Aaron Paul</span>
<span class="mdl-list__item-sub-title">62 Episodes</span>
</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
</div>
<div class="mdl-list__item mdl-list__item-two-line ">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
<span class=mdl-list__item-title>Bob Odenkirk</span>
<span class="mdl-list__item-sub-title">43 Episodes</span>
</span>
<span class="mdl-list__item-secondary-content">
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
</span>
</div>
</div>

47
src/list/snippets/icon.html
View File

@ -1,24 +1,27 @@
<!-- Icon List -->
<div class="mdl-cell mdl-cell--6-col">
<h4> Icon List </h4>
<ul class="mdl-list">
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons">person</i>
Bryan Cranston
<style>
.demo-list-icon {
width: 300px;
}
</style>
<ul class="demo-list-icon mdl-list">
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons">person</i>
Bryan Cranston
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons">person</i>
Aaron Paul
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons">person</i>
Aaron Paul
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons">person</i>
Bob Odenkirk
</span>
</li>
</ul>
</div>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons">person</i>
Bob Odenkirk
</span>
</li>
</ul>

79
src/list/snippets/list-control.html
View File

@ -1,39 +1,46 @@
<!-- List with action -->
<div class="mdl-cell mdl-cell--6-col">
<h4> List Item </h4>
<ul class="mdl-list">
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
Bryan Cranston
</span>
<style>
.demo-list-control {
width: 300px;
}
.demo-list-radio {
display: inline;
}
</style>
<ul class="demo-list-control mdl-list">
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
Bryan Cranston
</span>
<span class="mdl-list__item-secondary-action">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked />
</label>
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
Aaron Paul
</span>
<span class="mdl-list__item-secondary-action">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked />
<label class="demo-list-radio mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
<input type="radio" id="option-1" class="mdl-radio__button" name="options" value="1" checked />
</label>
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
Aaron Paul
</span>
<span class="mdl-list__item-secondary-action">
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
<input type="radio" id="option-1" class="mdl-radio__button" name="options" value="1" checked />
</label>
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
Bob Odenkirk
</span>
<span class="mdl-list__item-secondary-action">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input type="checkbox" id="switch-1" class="mdl-switch__input" checked />
</label>
</span>
</li>
</ul>
</div>
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
Bob Odenkirk
</span>
<span class="mdl-list__item-secondary-action">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input type="checkbox" id="switch-1" class="mdl-switch__input" checked />
</label>
</span>
</li>
</ul>

43
src/list/snippets/list-item.html
View File

@ -1,21 +1,24 @@
<!-- List with action -->
<div class="mdl-cell mdl-cell--6-col">
<h4> List Item </h4>
<ul class="mdl-list">
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
Bryan Cranston
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
Aaron Paul
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
Bob Odenkirk
</span>
</li>
</ul>
</div>
<style>
.demo-list-item {
width: 300px;
}
</style>
<ul class="demo-list-item mdl-list">
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
Bryan Cranston
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
Aaron Paul
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
Bob Odenkirk
</span>
</li>
</ul>

97
src/list/snippets/three-line.html
View File

@ -1,54 +1,51 @@
<!-- Three Line List with secondary info and action -->
<div class="mdl-cell mdl-cell--6-col">
<h4> Three Line List secondary info </h4>
<ul class="mdl-list">
<li class="mdl-list__item mdl-list__item-three-line">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
<span class=mdl-list__item-title>Bryan Cranston</span>
<span class="mdl-list__item-text-body">
Bryan Cranston played the role of Bryan Cranston in Breaking Bad,he is also know
for playing Hal in Malcom in the Middle. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur venenatis urna eget cursus varius. Donec ultrices quis arcu quis euismod.
Mauris sollicitudin neque lectus, id bibendum libero eleifend sed.
</span>
<style>
.demo-list-three {
width: 600px;
}
</style>
<ul class="demo-list-three mdl-list">
<li class="mdl-list__item mdl-list__item--three-line">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
<span class=mdl-list__item-title>Bryan Cranston</span>
<span class="mdl-list__item-text-body">
Bryan Cranston played the role of Bryan Cranston in Breaking Bad, he is also know
for playing Hal in Malcom in the Middle.
</span>
<span class="mdl-list__item-secondary-content">
<span class="mdl-list__item-secondary-info">Actor</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
</span>
<span class="mdl-list__item-secondary-content">
<span class="mdl-list__item-secondary-info">Actor</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
</span>
</li>
<li class="mdl-list__item mdl-list__item--three-line">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
<span class=mdl-list__item-title>Aaron Paul</span>
<span class="mdl-list__item-text-body">
Aaron Paul played the role of Aaron Paul in Breaking Bad. He also featured in
the "Need For Speed" Movie.
</span>
</li>
<li class="mdl-list__item mdl-list__item-three-line">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
<span class=mdl-list__item-title>Aaron Paul</span>
<span class="mdl-list__item-text-body">
Aaron Paul played the role of Aaron Paul in Breaking Bad. He also featurd in
the NEED FOR Speed Movie. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur venenatis urna eget cursus varius. Donec ultrices quis arcu quis euismod.
Mauris sollicitudin neque lectus, id bibendum libero eleifend sed.
</span>
</span>
<span class="mdl-list__item-secondary-content">
<span class="mdl-list__item-secondary-info">Actor</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
</span>
</li>
<li class="mdl-list__item mdl-list__item--three-line">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
<span class=mdl-list__item-title>Bob Odenkirk</span>
<span class="mdl-list__item-text-body">
Bob Odinkrik played the role of Bob Odenkirk in Breaking Bad. Due to public fondness for the
character, Bob stars in his own show now, called "Better Call Saul".
</span>
<span class="mdl-list__item-secondary-content">
<span class="mdl-list__item-secondary-info">Actor</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
</span>
</li>
<li class="mdl-list__item mdl-list__item-three-line">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
<span class=mdl-list__item-title>Bob Odenkirk</span>
<span class="mdl-list__item-text-body">
Bob Odinkrik played the role of Bob Odenkirk in Breaking Bad, due to the fondness of the
character, Bob stars in his own show now, call "Better Call Saul", Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur venenatis urna eget cursus varius. Donec ultrices quis arcu quis euismod.
Mauris sollicitudin neque lectus, id bibendum libero eleifend sed.
</span>
</span>
<span class="mdl-list__item-secondary-content">
<span class="mdl-list__item-secondary-info">Actor</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
</span>
</li>
</ul>
</div>
</span>
<span class="mdl-list__item-secondary-content">
<span class="mdl-list__item-secondary-info">Actor</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
</span>
</li>
</ul>

79
src/list/snippets/two-line.html
View File

@ -1,39 +1,42 @@
<!-- Two Line List with secondary info and action -->
<div class="mdl-cell mdl-cell--6-col">
<h4> Two Line List with Secondary Info and Action </h4>
<ul class="mdl-list">
<li class="mdl-list__item mdl-list__item-two-line">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
<span class=mdl-list__item-text>Bryan Cranston</span>
<span class="mdl-list__item-sub-title">62 Episodes</span>
</span>
<span class="mdl-list__item-secondary-content">
<span class="mdl-list__item-secondary-info">Actor</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
</span>
</li>
<li class="mdl-list__item mdl-list__item-two-line">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
<span class=mdl-list__item-text>Aaron Paul</span>
<span class="mdl-list__item-sub-title">62 Episodes</span>
</span>
<span class="mdl-list__item-secondary-content">
<span class="mdl-list__item-secondary-info">Actor</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
</span>
</li>
<li class="mdl-list__item mdl-list__item-two-line">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
<span class=mdl-list__item-text>Bob Odenkirk</span>
<span class="mdl-list__item-sub-title">62 Episodes</span>
</span>
<span class="mdl-list__item-secondary-content">
<span class="mdl-list__item-secondary-info">Actor</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
</span>
</li>
</ul>
</div>
<style>
.demo-list-two {
width: 300px;
}
</style>
<ul class="demo-list-two mdl-list">
<li class="mdl-list__item mdl-list__item--two-line">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
<span class=mdl-list__item-text>Bryan Cranston</span>
<span class="mdl-list__item-sub-title">62 Episodes</span>
</span>
<span class="mdl-list__item-secondary-content">
<span class="mdl-list__item-secondary-info">Actor</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
</span>
</li>
<li class="mdl-list__item mdl-list__item--two-line">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
<span class=mdl-list__item-text>Aaron Paul</span>
<span class="mdl-list__item-sub-title">62 Episodes</span>
</span>
<span class="mdl-list__item-secondary-content">
<span class="mdl-list__item-secondary-info">Actor</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
</span>
</li>
<li class="mdl-list__item mdl-list__item--two-line">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
<span class=mdl-list__item-text>Bob Odenkirk</span>
<span class="mdl-list__item-sub-title">62 Episodes</span>
</span>
<span class="mdl-list__item-secondary-content">
<span class="mdl-list__item-secondary-info">Actor</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
</span>
</li>
</ul>