列表

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

调用方式

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

色彩

背景色：透明背景。

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

相关资料

Material Design 列表设计规范

样式

纯文本

这是一个最简单的列表。

在线运行

使用链接作为列表条目。

在线运行

图标

列表可以包含图标。

在线运行

图标可以在列表右侧。

在线运行

用空图标进行占位。

在线运行

头像

列表可以包含头像。

在线运行

头像可以在列表右侧。

在线运行

同时包含头像和图标。

在线运行

用图标代替头像。

在线运行

多行文本

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

在线运行

分隔线

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

在线运行

去除分隔线的上下边距。

在线运行

副标题

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

在线运行

内凹型副标题

在线运行

密集型列表

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

在线运行

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

在线运行

激活状态

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

在线运行

在线运行

CSS 类名列表

更多示例

文件列表

在线运行

通讯录

在线运行