google/material-design-lite
1
1
Fork 0
mirror of https://github.com/google/material-design-lite.git synced 2024-09-19 16:18:04 +03:00
Code Issues Projects Releases Wiki Activity

🆕 List component

Browse Source
This commit is contained in:
Rohan Thacker 2015-09-08 01:11:52 +00:00 committed by Jonathan Garbee
parent 633a0399ee
commit 4875675ac8
9 changed files with 299 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/_variables.scss
View File

@ -265,6 +265,7 @@ $progress-fallback-buffer-color: unquote("rgba(#{$color-primary-contrast}, 0.9)"
$list-container-item-border-color: unquote("rgb(#{$palette-grey-300})") !default;
$list-container-view-background: unquote("rgb(#{$color-white})") !default;
$list-supporting-text-text-color: unquote("rgba(#{$color-black}, 0.54)") !default;
/* ========== Item ========== */
@ -357,6 +358,7 @@ $menu-fade-duration: 0.2s !default;
$list-container-height: 500px !default;
$list-container-width: 400px !default;
$list-container-item-height: 70px !default;
// $list__item-hover-color: unquote("rgb(#{$palette-grey-300})") !default;
/* LAYOUT */

87
src/list/_list.scss Normal file
View File

@ -0,0 +1,87 @@
@import "../variables";
@import "../mixins";
.mdl-list {
display: block;
padding: 8px 0 ;
list-style: none;
}
.mdl-list__item {
@include typo-body-1();
display: flex;
box-sizing: border-box;
height: 48px;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
padding : 16px 16px 20px 16px;
cursor: default;
& .mdl-list__item-primary-content {
order:0;
flex-grow: 2;
text-decoration: none;
& .material-icons {
font-size: 40px;
line-height: 0;
vertical-align: middle;
padding: 0 12px 0 0;
}
}
& .mdl-list__item-secondary-content {
display: flex;
flex-flow: column;
align-items: flex-end;
& .mdl-list__item-secondary-action label { display: inline; }
& .mdl-list__item-secondary-info {
@include typo-caption();
margin-bottom: 10px;
color: $list-supporting-text-text-color;
}
& .mdl-list__item-sub-header {
padding: 0 0 0 16px;
}
}
}
.mdl-list__item-avatar {
height: 56px;
}
.mdl-list__item-two-line {
height: 72px;
& .mdl-list__item-primary-content {
& .material-icons {
vertical-align: text-bottom;
}
& .mdl-list__item-sub-title, {
@include typo-caption();
display: block;
padding : 0 0 0 56px;
}
}
}
.mdl-list__item-three-line {
height: 88px;
& .mdl-list__item-primary-content {
& .material-icons {
vertical-align: text-bottom;
}
}
& .mdl-list__item-text-body {
@include typo-caption();
color: $list-supporting-text-text-color;
display: block;
height: 24px;
padding: 0 0 0 56px;
overflow: hidden;
}
}

32
src/list/snippets/action.html Normal file
View File

@ -0,0 +1,32 @@
<!-- 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>
</span>
</div>
</div>
</div>

24
src/list/snippets/icon.html Normal file
View File

@ -0,0 +1,24 @@
<!-- 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
</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>

39
src/list/snippets/list-control.html Normal file
View File

@ -0,0 +1,39 @@
<!-- 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>
<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-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>

21
src/list/snippets/list-item.html Normal file
View File

@ -0,0 +1,21 @@
<!-- 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>

54
src/list/snippets/three-line.html Normal file
View File

@ -0,0 +1,54 @@
<!-- 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>
</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 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 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>

39
src/list/snippets/two-line.html Normal file
View File

@ -0,0 +1,39 @@
<!-- 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>

1
src/material-design-lite.scss
View File

@ -36,6 +36,7 @@
@import "footer/mega_footer";
@import "footer/mini_footer";
@import "icon-toggle/icon-toggle";
@import "list/list";
@import "menu/menu";
@import "progress/progress";
@import "layout/layout";