menu MDUI 列表
color_lens
near_me
开始使用
keyboard_arrow_down
获取 MDUI 兼容性 规范 JavaScript 工具库
layers
样式
keyboard_arrow_down
颜色与主题 字体 网格布局 排版 图标 媒体 辅助类 阴影
widgets
组件
keyboard_arrow_down
涟漪动画效果 按钮 浮动操作按钮 下拉选择 分隔线 可扩展面板 文本框 选择控件 滑块 列表 列表控制 网格列表 Tab 选项卡 工具栏 应用栏 抽屉式导航 底部导航栏 卡片 纸片 工具提示 Snackbar 表格 对话框 菜单 进度指示器
view_carousel
JavaScript 插件
keyboard_arrow_down
Collapse Headroom
local_mall
资源
keyboard_arrow_down
Material 图标

列表

列表以垂直排列的方式显示多行条目。每行条目都可以包含图标、头像、文本等内容。

调用方式

列表组件使用纯 CSS 编写，只需编写 HTML 代码即可生效。

色彩

背景色：透明背景。

文字颜色：在亮色主题下为黑色，在深色主题下为白色。

相关阅读

Material Design 设计指南：组件 - 列表

样式

纯文本

这是一个最简单的列表。

codeplay_arrow
Example
  • Inbox
  • Starred
  • Send mail
<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>

使用链接作为列表条目。

codeplay_arrow
Example
Inbox Starred Send mail 
<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>

图标

列表可以包含图标。

codeplay_arrow
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>

图标可以在列表右侧。

codeplay_arrow
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>

用空图标进行占位。

codeplay_arrow
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>

头像

列表可以包含头像。

codeplay_arrow
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>

头像可以在列表右侧。

codeplay_arrow
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>

同时包含头像和图标。

codeplay_arrow
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>

用图标代替头像。

codeplay_arrow
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 限制文本占三行高度
codeplay_arrow
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>

分隔线

列表中的分隔线上下会有 8px 的间距。

codeplay_arrow
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>

去除分隔线的上下边距。

codeplay_arrow
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>

副标题

在列表中使用副标题时，会自动在副标题上方添加分割线。

codeplay_arrow
Example
  • Mail
  • Inbox
  • Sent
  • Work
  • 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>

内凹型副标题

codeplay_arrow
Example
  • Friends
  • Brendan Lim
  • me, Scott, Jennifer
  • Familay
  • 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>

密集型列表

密集型列表的各个元素会更紧凑。

codeplay_arrow
Example
  • Friends
  • move_to_inbox
    Inbox
  • send
    Outbox
  • Familay
  • 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>

另一个密集型列表的示例。

codeplay_arrow
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>

激活状态

激活状态的条目会添加背景色，并加粗文本。

codeplay_arrow
Example
  • Inbox
  • Starred
  • Send mail
<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>
codeplay_arrow
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 设置文本占三行高度

更多示例

文件列表

codeplay_arrow
Example
  • Folders
  • folder
    Photos
    Jan 9, 2014
    info
  • folder
    Recipes
    Jan 17, 2014
    info
  • folder
    Work
    Jan 28, 2014
    info
  • Files
  • assignment
    Photos
    Jan 9, 2014
    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>

通讯录

codeplay_arrow
Example
  • phone
    (650) 555-1234
    Mobile
    chat_bubble
  • (323) 555-6789
    Work
    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>
arrow_back Previous
滑块
arrow_forward Next
列表控制
设置文档主题

主题色

主色

强调色