c-mdui-a

<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="renderer" content="webkit"> <meta http-equiv="Cache-Control" content="no-siteapp"/> <title>列表 - MDUI 开发文档, Material Design 前端框架</title> <link rel="stylesheet" href="assets/mdui-v0.4.2/css/mdui.min.css"/> <link rel="stylesheet" href="assets/highlight-9.12.0/styles/github-gist.css"/> <link rel="stylesheet" href="assets/highlight-9.12.0/styles/railscasts.css"/> <link rel="stylesheet" href="assets/docs/css/docs.css"/> </head> <body class="mdui-drawer-body-left mdui-appbar-with-toolbar mdui-theme-primary-indigo mdui-theme-accent-pink"> <header class="mdui-appbar mdui-appbar-fixed"> <div class="mdui-toolbar mdui-color-theme"> <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-drawer="{target: '#main-drawer', swipe: true}"><i class="mdui-icon material-icons">menu</i></span> <a href="https://www.mdui.org/" class="mdui-typo-headline mdui-hidden-xs">MDUI</a> <a href="index.html" class="mdui-typo-title">文档</a> <div class="mdui-toolbar-spacer"></div> <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-dialog="{target: '#dialog-docs-theme'}" mdui-tooltip="{content: '设置主题'}"><i class="mdui-icon material-icons">color_lens</i></span> <a href="https://github.com/zdhxiong/mdui" target="_blank" class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-tooltip="{content: '查看 Github'}"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 36 36" enable-background="new 0 0 36 36" xml:space="preserve" class="mdui-icon" style="width: 24px;height:24px;"> <path fill-rule="evenodd" clip-rule="evenodd" fill="#ffffff" d="M18,1.4C9,1.4,1.7,8.7,1.7,17.7c0,7.2,4.7,13.3,11.1,15.5 c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1 c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4 c-0.2-0.4-0.7-2.1,0.2-4.3c0,0,1.4-0.4,4.5,1.7c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7 c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5 c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5C34.3,8.7,27,1.4,18,1.4z"></path> </svg> </a> </div> </header> <div class="mdui-drawer" id="main-drawer"> <div class="mdui-list" mdui-collapse="{accordion: true}" style="margin-bottom: 76px;"> <div class="mdui-collapse-item "> <div class="mdui-collapse-item-header mdui-list-item mdui-ripple"> <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-blue">near_me</i> <div class="mdui-list-item-content">开始使用</div> <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i> </div> <div class="mdui-collapse-item-body mdui-list"> <a href="download.html" class="mdui-list-item mdui-ripple ">安装</a> <a href="compatibility.html" class="mdui-list-item mdui-ripple ">兼容性</a> <a href="jq.html" class="mdui-list-item mdui-ripple ">JavaScript 工具库</a> <a href="global.html" class="mdui-list-item mdui-ripple ">JavaScript 全局方法</a> </div> </div> <div class="mdui-collapse-item "> <div class="mdui-collapse-item-header mdui-list-item mdui-ripple"> <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-deep-orange">layers</i> <div class="mdui-list-item-content">样式</div> <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i> </div> <div class="mdui-collapse-item-body mdui-list"> <a href="color.html" class="mdui-list-item mdui-ripple ">颜色与主题</a> <a href="font.html" class="mdui-list-item mdui-ripple ">字体</a> <a href="grid.html" class="mdui-list-item mdui-ripple ">网格布局</a> <a href="typo.html" class="mdui-list-item mdui-ripple ">排版</a> <a href="icon.html" class="mdui-list-item mdui-ripple ">图标</a> <a href="media.html" class="mdui-list-item mdui-ripple ">媒体</a> <a href="helper.html" class="mdui-list-item mdui-ripple ">辅助类</a> <a href="shadow.html" class="mdui-list-item mdui-ripple ">阴影</a> </div> </div> <div class="mdui-collapse-item mdui-collapse-item-open"> <div class="mdui-collapse-item-header mdui-list-item mdui-ripple"> <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-green">widgets</i> <div class="mdui-list-item-content">组件</div> <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i> </div> <div class="mdui-collapse-item-body mdui-list"> <a href="ripple.html" class="mdui-list-item mdui-ripple ">涟漪动画效果</a> <a href="button.html" class="mdui-list-item mdui-ripple ">按钮</a> <a href="fab.html" class="mdui-list-item mdui-ripple ">浮动操作按钮</a> <a href="select.html" class="mdui-list-item mdui-ripple ">下拉选择</a> <a href="divider.html" class="mdui-list-item mdui-ripple ">分隔线</a> <a href="panel.html" class="mdui-list-item mdui-ripple ">可扩展面板</a> <a href="textfield.html" class="mdui-list-item mdui-ripple ">文本框</a> <a href="selection_control.html" class="mdui-list-item mdui-ripple ">选择控件</a> <a href="slider.html" class="mdui-list-item mdui-ripple ">滑块</a> <a href="list.html" class="mdui-list-item mdui-ripple mdui-list-item-active">列表</a> <a href="list_control.html" class="mdui-list-item mdui-ripple ">列表控制</a> <a href="grid_list.html" class="mdui-list-item mdui-ripple ">网格列表</a> <a href="tab.html" class="mdui-list-item mdui-ripple ">Tab 选项卡</a> <a href="toolbar.html" class="mdui-list-item mdui-ripple ">工具栏</a> <a href="appbar.html" class="mdui-list-item mdui-ripple ">应用栏</a> <a href="drawer.html" class="mdui-list-item mdui-ripple ">抽屉式导航</a> <a href="bottom_nav.html" class="mdui-list-item mdui-ripple ">底部导航栏</a> <a href="card.html" class="mdui-list-item mdui-ripple ">卡片</a> <a href="chip.html" class="mdui-list-item mdui-ripple ">纸片</a> <a href="tooltip.html" class="mdui-list-item mdui-ripple ">工具提示</a> <a href="snackbar.html" class="mdui-list-item mdui-ripple ">Snackbar</a> <a href="table.html" class="mdui-list-item mdui-ripple ">表格</a> <a href="dialog.html" class="mdui-list-item mdui-ripple ">对话框</a> <a href="menu.html" class="mdui-list-item mdui-ripple ">菜单</a> <a href="progress.html" class="mdui-list-item mdui-ripple ">进度指示器</a> </div> </div> <div class="mdui-collapse-item "> <div class="mdui-collapse-item-header mdui-list-item mdui-ripple"> <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-brown">view_carousel</i> <div class="mdui-list-item-content">JavaScript 插件</div> <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i> </div> <div class="mdui-collapse-item-body mdui-list"> <a href="collapse.html" class="mdui-list-item mdui-ripple ">Collapse</a> <a href="headroom.html" class="mdui-list-item mdui-ripple ">Headroom</a> </div> </div> <div class="mdui-collapse-item "> <div class="mdui-collapse-item-header mdui-list-item mdui-ripple"> <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-purple">local_mall</i> <div class="mdui-list-item-content">资源</div> <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i> </div> <div class="mdui-collapse-item-body mdui-list"> <a href="material_icon.html" class="mdui-list-item mdui-ripple ">Material 图标</a> </div> </div> </div> </div> <a id="anchor-top"></a> <div class="mdui-container doc-container"> <h1 class="doc-title mdui-text-color-theme">列表</h1> <div class="doc-intro mdui-typo"> <p>列表以垂直排列的方式显示多行条目。每行条目都可以包含图标、头像、文本等内容。</p> <div class="doc-intro-module"> <h3>调用方式</h3> <p>列表组件使用纯 CSS 编写，只需编写 HTML 代码即可生效。</p> </div> <div class="doc-intro-module"> <h3>色彩</h3> <p>背景色：透明背景。</p> <p>文字颜色：在亮色主题下为黑色，在深色主题下为白色。</p> </div> <div class="doc-intro-module"> <h3>相关阅读</h3> <p><a href="http://www.mdui.org/design/components/lists.html" target="_blank">Material Design 设计指南：组件 - 列表</a></p> </div> </div> <nav class="doc-toc mdui-text-color-theme"> <ul> <li> <a data-scroll href="list.html#style">样式</a> <ul> <li><a data-scroll href="list.html#text">纯文本</a></li> <li><a data-scroll href="list.html#icon">图标</a></li> <li><a data-scroll href="list.html#avatar">头像</a></li> <li><a data-scroll href="list.html#multiline">多行文本</a></li> <li><a data-scroll href="list.html#divider">分隔线</a></li> <li><a data-scroll href="list.html#subheader">副标题</a></li> <li><a data-scroll href="list.html#dense">密集型列表</a></li> <li><a data-scroll href="list.html#active">激活状态</a></li> </ul> </li> <li><a data-scroll href="list.html#class">CSS 类名列表</a></li> <li> <a data-scroll href="list.html#demo">更多示例</a> <ul> <li><a data-scroll href="list.html#file-list">文件列表</a></li> <li><a data-scroll href="list.html#phone-list">通讯录</a></li> </ul> </li> </ul> </nav> <div class="doc-cover"></div> <div class="doc-chapter"> <div class="mdui-typo"> <h2 class="doc-chapter-title doc-chapter-title-first mdui-text-color-theme">样式 <a class="doc-anchor" id="style"></a></h2> </div> <div class="mdui-typo"> <h4 class="doc-article-title">纯文本 <a class="doc-anchor" id="text"></a></h4> <p>这是一个最简单的列表。</p> </div> <div class="doc-example"> <div class="doc-example-tools"><a href="javascript:;" class="viewsource" mdui-tooltip="{content: '查看代码'}"><i class="mdui-icon material-icons">code</i></a><a href="list/demo1.html" target="_blank" mdui-tooltip="{content: '在线调试'}"><i class="mdui-icon material-icons">play_arrow</i></a></div><div class="doc-example-demo-label">Example</div> <div class="doc-example-demo"> <ul class="mdui-list" style="max-width: 360px;"> <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> </div> <pre class="doc-example-code"><code class="lang-html"><ul class="<span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-list</span>"> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>">Inbox</li> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>">Starred</li> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>">Send mail</li> </ul></code></pre> </div> <div class="mdui-typo"> <p>使用链接作为列表条目。</p> </div> <div class="doc-example"> <div class="doc-example-tools"><a href="javascript:;" class="viewsource" mdui-tooltip="{content: '查看代码'}"><i class="mdui-icon material-icons">code</i></a><a href="list/demo2.html" target="_blank" mdui-tooltip="{content: '在线调试'}"><i class="mdui-icon material-icons">play_arrow</i></a></div><div class="doc-example-demo-label">Example</div> <div class="doc-example-demo"> <div class="mdui-list" style="max-width: 360px;"> <a href="list.html#" class="mdui-list-item mdui-ripple">Inbox</a> <a href="list.html#" class="mdui-list-item mdui-ripple">Starred</a> <a href="list.html#" class="mdui-list-item mdui-ripple">Send mail</a> </div> </div> <pre class="doc-example-code"><code class="lang-html"><div class="<span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-list</span>"> <a href="#" class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>">Inbox</a> <a href="#" class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>">Starred</a> <a href="#" class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>">Send mail</a> </div></code></pre> </div> <div class="mdui-typo"> <h4 class="doc-article-title">图标 <a class="doc-anchor" id="icon"></a></h4> <p>列表可以包含图标。</p> </div> <div class="doc-example"> <div class="doc-example-tools"><a href="javascript:;" class="viewsource" mdui-tooltip="{content: '查看代码'}"><i class="mdui-icon material-icons">code</i></a><a href="list/demo3.html" target="_blank" mdui-tooltip="{content: '在线调试'}"><i class="mdui-icon material-icons">play_arrow</i></a></div><div class="doc-example-demo-label">Example</div> <div class="doc-example-demo"> <ul class="mdui-list" style="max-width: 360px;"> <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> </div> <pre class="doc-example-code"><code class="lang-html"><ul class="mdui-list"> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="<span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-list-item-icon</span> <span class="mdui-typo"><a href="icon.html">mdui-icon</a></span> <span class="mdui-typo"><a href="material_icon.html">material-icons</a></span>">move_to_inbox</i> <div class="mdui-list-item-content">Inbox</div> </li> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="<span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-list-item-icon</span> <span class="mdui-typo"><a href="icon.html">mdui-icon</a></span> <span class="mdui-typo"><a href="material_icon.html">material-icons</a></span>">send</i> <div class="mdui-list-item-content">Outbox</div> </li> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="<span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-list-item-icon</span> <span class="mdui-typo"><a href="icon.html">mdui-icon</a></span> <span class="mdui-typo"><a href="material_icon.html">material-icons</a></span>">delete</i> <div class="mdui-list-item-content">Trash</div> </li> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="<span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-list-item-icon</span> <span class="mdui-typo"><a href="icon.html">mdui-icon</a></span> <span class="mdui-typo"><a href="material_icon.html">material-icons</a></span>">error</i> <div class="mdui-list-item-content">Spam</div> </li> </ul></code></pre> </div> <div class="mdui-typo"> <p>图标可以在列表右侧。</p> </div> <div class="doc-example"> <div class="doc-example-tools"><a href="javascript:;" class="viewsource" mdui-tooltip="{content: '查看代码'}"><i class="mdui-icon material-icons">code</i></a><a href="list/demo4.html" target="_blank" mdui-tooltip="{content: '在线调试'}"><i class="mdui-icon material-icons">play_arrow</i></a></div><div class="doc-example-demo-label">Example</div> <div class="doc-example-demo"> <ul class="mdui-list" style="max-width: 360px;"> <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> </div> <pre class="doc-example-code"><code class="lang-html"><ul class="mdui-list"> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <div class="mdui-list-item-content">Inbox</div> <i class="<span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-list-item-icon</span> <span class="mdui-typo"><a href="icon.html">mdui-icon</a></span> <span class="mdui-typo"><a href="material_icon.html">material-icons</a></span>">move_to_inbox</i> </li> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <div class="mdui-list-item-content">Outbox</div> <i class="<span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-list-item-icon</span> <span class="mdui-typo"><a href="icon.html">mdui-icon</a></span> <span class="mdui-typo"><a href="material_icon.html">material-icons</a></span>">send</i> </li> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <div class="mdui-list-item-content">Trash</div> <i class="<span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-list-item-icon</span> <span class="mdui-typo"><a href="icon.html">mdui-icon</a></span> <span class="mdui-typo"><a href="material_icon.html">material-icons</a></span>">delete</i> </li> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <div class="mdui-list-item-content">Spam</div> <i class="<span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-list-item-icon</span> <span class="mdui-typo"><a href="icon.html">mdui-icon</a></span> <span class="mdui-typo"><a href="material_icon.html">material-icons</a></span>">error</i> </li> </ul></code></pre> </div> <div class="mdui-typo"> <p>用空图标进行占位。</p> </div> <div class="doc-example"> <div class="doc-example-tools"><a href="javascript:;" class="viewsource" mdui-tooltip="{content: '查看代码'}"><i class="mdui-icon material-icons">code</i></a><a href="list/demo5.html" target="_blank" mdui-tooltip="{content: '在线调试'}"><i class="mdui-icon material-icons">play_arrow</i></a></div><div class="doc-example-demo-label">Example</div> <div class="doc-example-demo"> <ul class="mdui-list" style="max-width: 360px;"> <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> </div> <pre class="doc-example-code"><code class="lang-html"><ul class="mdui-list"> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="mdui-list-item-icon <span class="mdui-typo"><a href="icon.html">mdui-icon</a></span> <span class="mdui-typo"><a href="material_icon.html">material-icons</a></span>">move_to_inbox</i> <div class="mdui-list-item-content">Inbox</div> </li> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="mdui-list-item-icon <span class="mdui-typo"><a href="icon.html">mdui-icon</a></span> <span class="mdui-typo"><a href="material_icon.html">material-icons</a></span>">send</i> <div class="mdui-list-item-content">Outbox</div> </li> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="<span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-list-item-icon</span>"></i> <div class="mdui-list-item-content">Trash</div> </li> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="<span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-list-item-icon</span>"></i> <div class="mdui-list-item-content">Spam</div> </li> </ul></code></pre> </div> <div class="mdui-typo"> <h4 class="doc-article-title">头像 <a class="doc-anchor" id="avatar"></a></h4> <p>列表可以包含头像。</p> </div> <div class="doc-example"> <div class="doc-example-tools"><a href="javascript:;" class="viewsource" mdui-tooltip="{content: '查看代码'}"><i class="mdui-icon material-icons">code</i></a><a href="list/demo6.html" target="_blank" mdui-tooltip="{content: '在线调试'}"><i class="mdui-icon material-icons">play_arrow</i></a></div><div class="doc-example-demo-label">Example</div> <div class="doc-example-demo"> <ul class="mdui-list" style="max-width: 360px;"> <li class="mdui-list-item mdui-ripple"> <div class="mdui-list-item-avatar"><img src="assets/docs/img/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="assets/docs/img/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="assets/docs/img/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="assets/docs/img/avatar4.jpg"/></div> <div class="mdui-list-item-content">Kerem Suer</div> </li> </ul> </div> <pre class="doc-example-code"><code class="lang-html"><ul class="mdui-list"> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <div class="<span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-list-item-avatar</span>"><img src="avatar1.jpg"/></div> <div class="mdui-list-item-content">Brendan Lim</div> </li> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <div class="<span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-list-item-avatar</span>"><img src="avatar2.jpg"/></div> <div class="mdui-list-item-content">me, Scott, Jennifer</div> </li> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <div class="<span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-list-item-avatar</span>"><img src="avatar3.jpg"/></div> <div class="mdui-list-item-content">Grace Ng</div> </li> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <div class="<span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-list-item-avatar</span>"><img src="avatar4.jpg"/></div> <div class="mdui-list-item-content">Kerem Suer</div> </li> </ul></code></pre> </div> <div class="mdui-typo"> <p>头像可以在列表右侧。</p> </div> <div class="doc-example"> <div class="doc-example-tools"><a href="javascript:;" class="viewsource" mdui-tooltip="{content: '查看代码'}"><i class="mdui-icon material-icons">code</i></a><a href="list/demo7.html" target="_blank" mdui-tooltip="{content: '在线调试'}"><i class="mdui-icon material-icons">play_arrow</i></a></div><div class="doc-example-demo-label">Example</div> <div class="doc-example-demo"> <ul class="mdui-list" style="max-width: 360px;"> <li class="mdui-list-item mdui-ripple"> <div class="mdui-list-item-content">Brendan Lim</div> <div class="mdui-list-item-avatar"><img src="assets/docs/img/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="assets/docs/img/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="assets/docs/img/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="assets/docs/img/avatar4.jpg"/></div> </li> </ul> </div> <pre class="doc-example-code"><code class="lang-html"><ul class="mdui-list"> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <div class="mdui-list-item-content">Brendan Lim</div> <div class="<span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-list-item-avatar</span>"><img src="avatar1.jpg"/></div> </li> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <div class="mdui-list-item-content">me, Scott, Jennifer</div> <div class="<span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-list-item-avatar</span>"><img src="avatar2.jpg"/></div> </li> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <div class="mdui-list-item-content">Grace Ng</div> <div class="<span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-list-item-avatar</span>"><img src="avatar3.jpg"/></div> </li> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <div class="mdui-list-item-content">Kerem Suer</div> <div class="<span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-list-item-avatar</span>"><img src="avatar4.jpg"/></div> </li> </ul></code></pre> </div> <div class="mdui-typo"> <p>同时包含头像和图标。</p> </div> <div class="doc-example"> <div class="doc-example-tools"><a href="javascript:;" class="viewsource" mdui-tooltip="{content: '查看代码'}"><i class="mdui-icon material-icons">code</i></a><a href="list/demo8.html" target="_blank" mdui-tooltip="{content: '在线调试'}"><i class="mdui-icon material-icons">play_arrow</i></a></div><div class="doc-example-demo-label">Example</div> <div class="doc-example-demo"> <ul class="mdui-list" style="max-width: 360px;"> <li class="mdui-list-item mdui-ripple"> <div class="mdui-list-item-avatar"><img src="assets/docs/img/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="assets/docs/img/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="assets/docs/img/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="assets/docs/img/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> </div> <pre class="doc-example-code"><code class="lang-html"><ul class="mdui-list"> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <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 <span class="mdui-typo"><a href="icon.html">mdui-icon</a></span> <span class="mdui-typo"><a href="material_icon.html">material-icons</a></span>">chat_bubble</i> </li> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <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 <span class="mdui-typo"><a href="icon.html">mdui-icon</a></span> <span class="mdui-typo"><a href="material_icon.html">material-icons</a></span>">chat_bubble</i> </li> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <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 <span class="mdui-typo"><a href="icon.html">mdui-icon</a></span> <span class="mdui-typo"><a href="material_icon.html">material-icons</a></span>">chat_bubble</i> </li> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <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 <span class="mdui-typo"><a href="icon.html">mdui-icon</a></span> <span class="mdui-typo"><a href="material_icon.html">material-icons</a></span>">chat_bubble</i> </li> </ul></code></pre> </div> <div class="mdui-typo"> <p>用图标代替头像。</p> </div> <div class="doc-example"> <div class="doc-example-tools"><a href="javascript:;" class="viewsource" mdui-tooltip="{content: '查看代码'}"><i class="mdui-icon material-icons">code</i></a><a href="list/demo19.html" target="_blank" mdui-tooltip="{content: '在线调试'}"><i class="mdui-icon material-icons">play_arrow</i></a></div><div class="doc-example-demo-label">Example</div> <div class="doc-example-demo"> <ul class="mdui-list" style="max-width: 360px;"> <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> </div> <pre class="doc-example-code"><code class="lang-html"><ul class="mdui-list"> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="mdui-list-item-avatar <span class="mdui-typo"><a href="icon.html">mdui-icon</a></span> <span class="mdui-typo"><a href="material_icon.html">material-icons</a></span>">folder</i> <div class="mdui-list-item-content">Photos</div> </li> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="mdui-list-item-avatar <span class="mdui-typo"><a href="icon.html">mdui-icon</a></span> <span class="mdui-typo"><a href="material_icon.html">material-icons</a></span>">folder</i> <div class="mdui-list-item-content">Recipes</div> </li> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="mdui-list-item-avatar <span class="mdui-typo"><a href="icon.html">mdui-icon</a></span> <span class="mdui-typo"><a href="material_icon.html">material-icons</a></span>">assignment</i> <div class="mdui-list-item-content">Work</div> </li> </ul></code></pre> </div> <div class="mdui-typo"> <h4 class="doc-article-title">多行文本 <a class="doc-anchor" id="multiline"></a></h4> <p>每一个列表条目最多可包含 3 行文本，如果有超过 3 行的文本，就应该使用 <a href="card.html">卡片</a> 代替。</p> <p>默认不限制文本的高度，即使文本高度超过了 3 行，也会照常显示出来。可以在 <code>.mdui-list-item-title</code> 和 <code>.mdui-list-item-text</code> 上添加类来限制文本的高度：</p> <ul> <li>添加类 <code>.mdui-list-item-one-line</code> 限制文本占一行高度</li> <li>添加类 <code>.mdui-list-item-two-line</code> 限制文本占两行高度</li> <li>添加类 <code>.mdui-list-item-three-line</code> 限制文本占三行高度</li> </ul> </div> <div class="doc-example"> <div class="doc-example-tools"><a href="javascript:;" class="viewsource" mdui-tooltip="{content: '查看代码'}"><i class="mdui-icon material-icons">code</i></a><a href="list/demo9.html" target="_blank" mdui-tooltip="{content: '在线调试'}"><i class="mdui-icon material-icons">play_arrow</i></a></div><div class="doc-example-demo-label">Example</div> <div class="doc-example-demo"> <ul class="mdui-list" style="max-width: 360px;"> <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> </div> <pre class="doc-example-code"><code class="lang-html"><ul class="mdui-list"> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <div class="mdui-list-item-content"> <div class="<span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-list-item-title</span> <span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-list-item-one-line</span>">Multiline item</div> <div class="<span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-list-item-text</span> <span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-list-item-two-line</span>">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 <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <div class="mdui-list-item-content"> <div class="<span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-list-item-title</span> <span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-list-item-one-line</span>">Multiline item</div> <div class="<span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-list-item-text</span> <span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-list-item-two-line</span>">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></code></pre> </div> <div class="mdui-typo"> <h4 class="doc-article-title">分隔线 <a class="doc-anchor" id="divider"></a></h4> <p>列表中的分隔线上下会有 8px 的间距。</p> </div> <div class="doc-example"> <div class="doc-example-tools"><a href="javascript:;" class="viewsource" mdui-tooltip="{content: '查看代码'}"><i class="mdui-icon material-icons">code</i></a><a href="list/demo10.html" target="_blank" mdui-tooltip="{content: '在线调试'}"><i class="mdui-icon material-icons">play_arrow</i></a></div><div class="doc-example-demo-label">Example</div> <div class="doc-example-demo"> <ul class="mdui-list" style="max-width: 360px;"> <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> </div> <pre class="doc-example-code"><code class="lang-html"><ul class="mdui-list"> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>">Inbox</li> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>">Starred</li> <li class="<span class="mdui-typo"><a href="divider.html"><span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-divider</span></a></span>"></li> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>">All mail</li> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>">Trash</li> </ul></code></pre> </div> <div class="mdui-typo"> <p>去除分隔线的上下边距。</p> </div> <div class="doc-example"> <div class="doc-example-tools"><a href="javascript:;" class="viewsource" mdui-tooltip="{content: '查看代码'}"><i class="mdui-icon material-icons">code</i></a><a href="list/demo11.html" target="_blank" mdui-tooltip="{content: '在线调试'}"><i class="mdui-icon material-icons">play_arrow</i></a></div><div class="doc-example-demo-label">Example</div> <div class="doc-example-demo"> <ul class="mdui-list" style="max-width: 360px;"> <li class="mdui-list-item mdui-ripple"> <div class="mdui-list-item-avatar"><img src="assets/docs/img/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="assets/docs/img/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="assets/docs/img/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> </div> <pre class="doc-example-code"><code class="lang-html"><ul class="mdui-list"> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <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="<span class="mdui-typo"><a href="divider.html">mdui-divider-inset</a></span> <span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-m-y-0</span>"></li> <li class="mdui-list-item <span class="mdui-typo"><a href="https://www.mdui.org/ripple">mdui-ripple</a></span>"> <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="<span class="mdui-typo"><a href="divider.html">mdui-divider-inset</a></span> <span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-m-y-0</span>"></li> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <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></code></pre> </div> <div class="mdui-typo"> <h4 class="doc-article-title">副标题 <a class="doc-anchor" id="subheader"></a></h4> <p>在列表中使用副标题时，会自动在副标题上方添加分割线。</p> </div> <div class="doc-example"> <div class="doc-example-tools"><a href="javascript:;" class="viewsource" mdui-tooltip="{content: '查看代码'}"><i class="mdui-icon material-icons">code</i></a><a href="list/demo12.html" target="_blank" mdui-tooltip="{content: '在线调试'}"><i class="mdui-icon material-icons">play_arrow</i></a></div><div class="doc-example-demo-label">Example</div> <div class="doc-example-demo"> <ul class="mdui-list" style="max-width: 360px;"> <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> </div> <pre class="doc-example-code"><code class="lang-html"><ul class="mdui-list"> <li class="<span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-subheader</span>">Mail</li> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>">Inbox</li> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>">Sent</li> <li class="<span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-subheader</span>">Work</li> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>">Family</li> <li class="mdui-list-item <span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>">Friends</li> </ul></code></pre> </div> <div class="mdui-typo"> <p>内凹型副标题</p> </div> <div class="doc-example"> <div class="doc-example-tools"><a href="javascript:;" class="viewsource" mdui-tooltip="{content: '查看代码'}"><i class="mdui-icon material-icons">code</i></a><a href="list/demo13.html" target="_blank" mdui-tooltip="{content: '在线调试'}"><i class="mdui-icon material-icons">play_arrow</i></a></div><div class="doc-example-demo-label">Example</div> <div class="doc-example-demo"> <ul class="mdui-list" style="max-width: 360px;"> <li class="mdui-subheader-inset">Friends</li> <li class="mdui-list-item mdui-ripple"> <div class="mdui-list-item-avatar"><img src="assets/docs/img/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="assets/docs/img/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="assets/docs/img/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="assets/docs/img/avatar4.jpg"/></div> <div class="