codecamp

列表

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

调用方式

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

色彩

背景色:透明背景。

文字颜色:在亮色主题下为黑色,在深色主题下为白色。


相关资料

Material Design 列表设计规范


样式

纯文本

这是一个最简单的列表。

www.mdui.org - 列表 - 纯文本

在线运行


使用链接作为列表条目。

www.mdui.org - 列表 - 使用链接作为列表条目

在线运行


图标

列表可以包含图标。

www.mdui.org - 列表 - 含图标的列表

在线运行


图标可以在列表右侧。

www.mdui.org - 列表 - 图标在右侧

在线运行


用空图标进行占位。

www.mdui.org - 列表 - 用空图标进行占位

在线运行


头像

列表可以包含头像。

www.mdui.org - 列表 - 含头像

在线运行


头像可以在列表右侧。

www.mdui.org - 列表 - 头像在右侧

在线运行


同时包含头像和图标。

www.mdui.org - 列表 - 同时包含头像和图标

在线运行


用图标代替头像。

www.mdui.org - 列表 - 用图标代替头像

在线运行


多行文本

每一个列表条目最多可包含 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 限制文本占三行高度

www.mdui.org - 列表 - 多行文本

在线运行


分隔线

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

www.mdui.org - 列表 - 分隔线

在线运行


去除分隔线的上下边距。

www.mdui.org - 列表 - 去除分隔线的上下边距

在线运行


副标题

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

www.mdui.org - 列表 - 副标题

在线运行


内凹型副标题

www.mdui.org - 列表 - 内凹型副标题

在线运行


密集型列表

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

www.mdui.org - 列表 - 密集型列表

在线运行


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

www.mdui.org - 列表 - 另一个密集型列表

在线运行


激活状态

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

www.mdui.org - 列表 - 激活状态

在线运行


www.mdui.org - 列表 - 多行文本激活状态

在线运行


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 设置文本占三行高度


更多示例

文件列表

www.mdui.org - 列表 - 文件列表

在线运行


通讯录

www.mdui.org - 列表 - 通讯录

在线运行





滑块
列表控制
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }