mirror of
https://github.com/google/material-design-lite.git
synced 2024-09-11 12:25:38 +03:00
commit
6bd393382f
BIN
docs/_assets/comp_lists.png
Normal file
BIN
docs/_assets/comp_lists.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.5 KiB |
@ -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.
|
||||
|
@ -13,7 +13,7 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
|
||||
@import "../variables";
|
||||
@import "../mixins";
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user