Example
<ul class="mdui-list">
<li class="mdui-list-item mdui-ripple">Inbox</li>
<li class="mdui-list-item mdui-ripple">Starred</li>
<li class="mdui-list-item mdui-ripple">Send mail</li>
</ul>
Example
<div class="mdui-list">
<a href="#" class="mdui-list-item mdui-ripple">Inbox</a>
<a href="#" class="mdui-list-item mdui-ripple">Starred</a>
<a href="#" class="mdui-list-item mdui-ripple">Send mail</a>
</div>
Example
-
move_to_inbox
Inbox
-
send
Outbox
-
delete
Trash
-
error
Spam
<ul class="mdui-list">
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons">move_to_inbox</i>
<div class="mdui-list-item-content">Inbox</div>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons">send</i>
<div class="mdui-list-item-content">Outbox</div>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons">delete</i>
<div class="mdui-list-item-content">Trash</div>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons">error</i>
<div class="mdui-list-item-content">Spam</div>
</li>
</ul>
Example
-
Inbox
move_to_inbox
-
Outbox
send
-
Trash
delete
-
Spam
error
<ul class="mdui-list">
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-content">Inbox</div>
<i class="mdui-list-item-icon mdui-icon material-icons">move_to_inbox</i>
</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-content">Outbox</div>
<i class="mdui-list-item-icon mdui-icon material-icons">send</i>
</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-content">Trash</div>
<i class="mdui-list-item-icon mdui-icon material-icons">delete</i>
</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-content">Spam</div>
<i class="mdui-list-item-icon mdui-icon material-icons">error</i>
</li>
</ul>
Example
-
move_to_inbox
Inbox
-
send
Outbox
-
Trash
-
Spam
<ul class="mdui-list">
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons">move_to_inbox</i>
<div class="mdui-list-item-content">Inbox</div>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons">send</i>
<div class="mdui-list-item-content">Outbox</div>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon"></i>
<div class="mdui-list-item-content">Trash</div>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon"></i>
<div class="mdui-list-item-content">Spam</div>
</li>
</ul>
Example
-
Brendan Lim
-
me, Scott, Jennifer
-
Grace Ng
-
Kerem Suer
<ul class="mdui-list">
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar1.jpg"/>
</div>
<div class="mdui-list-item-content">Brendan Lim</div>
</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar2.jpg"/>
</div>
<div class="mdui-list-item-content">me, Scott, Jennifer</div>
</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar3.jpg"/>
</div>
<div class="mdui-list-item-content">Grace Ng</div>
</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar4.jpg"/>
</div>
<div class="mdui-list-item-content">Kerem Suer</div>
</li>
</ul>
Example
-
Brendan Lim
-
me, Scott, Jennifer
-
Grace Ng
-
Kerem Suer
<ul class="mdui-list">
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-content">Brendan Lim</div>
<div class="mdui-list-item-avatar">
<img src="avatar1.jpg"/>
</div>
</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-content">me, Scott, Jennifer</div>
<div class="mdui-list-item-avatar">
<img src="avatar2.jpg"/>
</div>
</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-content">Grace Ng</div>
<div class="mdui-list-item-avatar">
<img src="avatar3.jpg"/>
</div>
</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-content">Kerem Suer</div>
<div class="mdui-list-item-avatar">
<img src="avatar4.jpg"/>
</div>
</li>
</ul>
Example
-
Brendan Lim
chat_bubble
-
me, Scott, Jennifer
chat_bubble
-
Grace Ng
chat_bubble
-
Kerem Suer
chat_bubble
<ul class="mdui-list">
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar1.jpg"/>
</div>
<div class="mdui-list-item-content">Brendan Lim</div>
<i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar2.jpg"/>
</div>
<div class="mdui-list-item-content">me, Scott, Jennifer</div>
<i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar3.jpg"/>
</div>
<div class="mdui-list-item-content">Grace Ng</div>
<i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar4.jpg"/>
</div>
<div class="mdui-list-item-content">Kerem Suer</div>
<i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
</li>
</ul>
Example
-
folder
Photos
-
folder
Recipes
-
assignment
Work
<ul class="mdui-list">
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
<div class="mdui-list-item-content">Photos</div>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
<div class="mdui-list-item-content">Recipes</div>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-avatar mdui-icon material-icons">assignment</i>
<div class="mdui-list-item-content">Work</div>
</li>
</ul>
多行文本
每一个列表条目最多可包含 3 行文本,如果有超过 3 行的文本,就应该使用 卡片 代替。
默认不限制文本的高度,即使文本高度超过了 3 行,也会照常显示出来。可以在 .mdui-list-item-title
和 .mdui-list-item-text
上添加类来限制文本的高度:
- 添加类
.mdui-list-item-one-line
限制文本占一行高度
- 添加类
.mdui-list-item-two-line
限制文本占两行高度
- 添加类
.mdui-list-item-three-line
限制文本占三行高度
Example
-
Multiline item
You've got to get enough sleep. Other travelling salesmen live a life of luxury. You've got to get enough sleep. Other travelling salesmen live a life of luxury.
-
Multiline item
You've got to get enough sleep. Other travelling salesmen live a life of luxury. You've got to get enough sleep. Other travelling salesmen live a life of luxury.
<ul class="mdui-list">
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-content">
<div class="mdui-list-item-title mdui-list-item-one-line">Multiline item</div>
<div class="mdui-list-item-text mdui-list-item-two-line">You've got to get enough sleep. Other travelling salesmen live a life of luxury. You've got to get enough sleep. Other travelling salesmen live a life of luxury.</div>
</div>
</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-content">
<div class="mdui-list-item-title mdui-list-item-one-line">Multiline item</div>
<div class="mdui-list-item-text mdui-list-item-two-line">You've got to get enough sleep. Other travelling salesmen live a life of luxury. You've got to get enough sleep. Other travelling salesmen live a life of luxury.</div>
</div>
</li>
</ul>
Example
- Inbox
- Starred
- All mail
- Trash
<ul class="mdui-list">
<li class="mdui-list-item mdui-ripple">Inbox</li>
<li class="mdui-list-item mdui-ripple">Starred</li>
<li class="mdui-divider"></li>
<li class="mdui-list-item mdui-ripple">All mail</li>
<li class="mdui-list-item mdui-ripple">Trash</li>
</ul>
Example
-
Brunch this weekend?
All Connors - I'll be in your neighborhood ...
-
Summer BBQ
to Alex, Scott, Jennifer - Wish I could ...
-
Oui oui
Sandra Adams - Do you have Paris reco ...
<ul class="mdui-list">
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar1.jpg"/>
</div>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">Brunch this weekend?</div>
<div class="mdui-list-item-text mdui-list-item-one-line">
<span class="mdui-text-color-theme-text">All Connors</span> - I'll be in your neighborhood ...
</div>
</div>
</li>
<li class="mdui-divider-inset mdui-m-y-0"></li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar2.jpg"/>
</div>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">Summer BBQ</div>
<div class="mdui-list-item-text mdui-list-item-one-line">
<span class="mdui-text-color-theme-text">to Alex, Scott, Jennifer</span> - Wish I could ...
</div>
</div>
</li>
<li class="mdui-divider-inset mdui-m-y-0"></li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar3.jpg"/>
</div>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">Oui oui</div>
<div class="mdui-list-item-text mdui-list-item-one-line">
<span class="mdui-text-color-theme-text">Sandra Adams</span> - Do you have Paris reco ...
</div>
</div>
</li>
</ul>
副标题
在列表中使用副标题时,会自动在副标题上方添加分割线。
Example
- Inbox
- Sent
- Family
- Friends
<ul class="mdui-list">
<li class="mdui-subheader">Mail</li>
<li class="mdui-list-item mdui-ripple">Inbox</li>
<li class="mdui-list-item mdui-ripple">Sent</li>
<li class="mdui-subheader">Work</li>
<li class="mdui-list-item mdui-ripple">Family</li>
<li class="mdui-list-item mdui-ripple">Friends</li>
</ul>
Example
-
Brendan Lim
-
me, Scott, Jennifer
-
Grace Ng
-
Kerem Suer
<ul class="mdui-list">
<li class="mdui-subheader-inset">Friends</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar1.jpg"/>
</div>
<div class="mdui-list-item-content">Brendan Lim</div>
</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar2.jpg"/>
</div>
<div class="mdui-list-item-content">me, Scott, Jennifer</div>
</li>
<li class="mdui-subheader-inset">Familay</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar3.jpg"/>
</div>
<div class="mdui-list-item-content">Grace Ng</div>
</li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar4.jpg"/>
</div>
<div class="mdui-list-item-content">Kerem Suer</div>
</li>
</ul>
Example
-
move_to_inbox
Inbox
-
send
Outbox
-
delete
Trash
-
error
Spam
<ul class="mdui-list mdui-list-dense">
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons">move_to_inbox</i>
<div class="mdui-list-item-content">Inbox</div>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons">send</i>
<div class="mdui-list-item-content">Outbox</div>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons">delete</i>
<div class="mdui-list-item-content">Trash</div>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons">error</i>
<div class="mdui-list-item-content">Spam</div>
</li>
</ul>
Example
-
Brunch this weekend?
All Connors - I'll be in your neighborhood doing errands this weekend. Do you want ...
-
Summer BBQ
to Alex, Scott, Jennifer - Wish I could come, but I'm out of town this weekend.
-
Oui oui
Sandra Adams - Do you have Paris recommendations? Have you ever been?
<ul class="mdui-list mdui-list-dense">
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar1.jpg"/>
</div>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">Brunch this weekend?</div>
<div class="mdui-list-item-text mdui-list-item-two-line">
<span class="mdui-text-color-theme-text">All Connors</span> - I'll be in your neighborhood doing errands this weekend. Do you want ...
</div>
</div>
</li>
<li class="mdui-divider-inset mdui-m-y-0"></li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar2.jpg"/>
</div>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">Summer BBQ</div>
<div class="mdui-list-item-text mdui-list-item-two-line">
<span class="mdui-text-color-theme-text">to Alex, Scott, Jennifer</span> - Wish I could come, but I'm out of town this weekend.
</div>
</div>
</li>
<li class="mdui-divider-inset mdui-m-y-0"></li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar3.jpg"/>
</div>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">Oui oui</div>
<div class="mdui-list-item-text mdui-list-item-two-line">
<span class="mdui-text-color-theme-text">Sandra Adams</span> - Do you have Paris recommendations? Have you ever been?
</div>
</div>
</li>
</ul>
激活状态
激活状态的条目会添加背景色,并加粗文本。
Example
<ul class="mdui-list">
<li class="mdui-list-item mdui-list-item-active mdui-ripple">Inbox</li>
<li class="mdui-list-item mdui-ripple">Starred</li>
<li class="mdui-list-item mdui-ripple">Send mail</li>
</ul>
Example
-
Brunch this weekend?
All Connors - I'll be in your neighborhood ...
-
Summer BBQ
to Alex, Scott, Jennifer - Wish I could ...
-
Oui oui
Sandra Adams - Do you have Paris reco ...
<ul class="mdui-list">
<li class="mdui-list-item mdui-list-item-active mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar1.jpg"/>
</div>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">Brunch this weekend?</div>
<div class="mdui-list-item-text mdui-list-item-one-line">
<span class="mdui-text-color-theme-text">All Connors</span> - I'll be in your neighborhood ...
</div>
</div>
</li>
<li class="mdui-divider-inset mdui-m-y-0"></li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar2.jpg"/>
</div>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">Summer BBQ</div>
<div class="mdui-list-item-text mdui-list-item-one-line">
<span class="mdui-text-color-theme-text">to Alex, Scott, Jennifer</span> - Wish I could ...
</div>
</div>
</li>
<li class="mdui-divider-inset mdui-m-y-0"></li>
<li class="mdui-list-item mdui-ripple">
<div class="mdui-list-item-avatar">
<img src="avatar3.jpg"/>
</div>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">Oui oui</div>
<div class="mdui-list-item-text mdui-list-item-one-line">
<span class="mdui-text-color-theme-text">Sandra Adams</span> - Do you have Paris reco ...
</div>
</div>
</li>
</ul>
CSS 类名列表
类名 |
效果 |
说明 |
.mdui-list |
定义列表 |
必须 |
.mdui-list-dense |
定义密集型列表 |
|
.mdui-list-item |
定义列表条目 |
必须 |
.mdui-list-item-active |
设置列表条目为激活状态 |
|
.mdui-list-item-icon |
定义列表条目中的图标 |
|
.mdui-list-item-avatar |
定义列表条目中的头像 |
|
.mdui-list-item-content |
定义列表条目的内容 |
|
.mdui-list-item-title |
定义列表条目中的内容中的标题 |
|
.mdui-list-item-text |
定义列表条目的内容中的副文本 |
|
.mdui-list-item-one-line |
设置文本占一行高度 |
|
.mdui-list-item-two-line |
设置文本占两行高度 |
|
.mdui-list-item-three-line |
设置文本占三行高度 |
|
Example
-
folder
info
-
folder
info
-
folder
info
-
assignment
info
-
assessment
Kitchen remodel
Jan 10, 2014
info
<ul class="mdui-list">
<li class="mdui-subheader-inset">Folders</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">Photos</div>
<div class="mdui-list-item-text">Jan 9, 2014</div>
</div>
<i class="mdui-list-item-icon mdui-icon material-icons">info</i>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">Recipes</div>
<div class="mdui-list-item-text">Jan 17, 2014</div>
</div>
<i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-grey-400">info</i>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">Work</div>
<div class="mdui-list-item-text">Jan 28, 2014</div>
</div>
<i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-grey-400">info</i>
</li>
<li class="mdui-subheader-inset">Files</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-avatar mdui-icon material-icons mdui-color-blue mdui-text-color-white">assignment</i>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">Photos</div>
<div class="mdui-list-item-text">Jan 9, 2014</div>
</div>
<i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-grey-400">info</i>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-avatar mdui-icon material-icons mdui-color-yellow-600 mdui-text-color-white">assessment</i>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">Kitchen remodel</div>
<div class="mdui-list-item-text">Jan 10, 2014</div>
</div>
<i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-grey-400">info</i>
</li>
</ul>
Example
-
phone
chat_bubble
-
chat_bubble
-
email
aliconnors@example.com
Personal
-
ali_connors@example.com
Work
<ul class="mdui-list">
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-indigo">phone</i>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">(650) 555-1234</div>
<div class="mdui-list-item-text">Mobile</div>
</div>
<i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon"></i>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">(323) 555-6789</div>
<div class="mdui-list-item-text">Work</div>
</div>
<i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
</li>
<li class="mdui-divider"></li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-indigo">email</i>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">aliconnors@example.com</div>
<div class="mdui-list-item-text">Personal</div>
</div>
</li>
<li class="mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon"></i>
<div class="mdui-list-item-content">
<div class="mdui-list-item-title">ali_connors@example.com</div>
<div class="mdui-list-item-text">Work</div>
</div>
</li>
</ul>