列表

列表以垂直排列的方式顯示多行條目。每行條目都可以包含圖標、頭像、文本等內(nèi)容。

調(diào)用方式

列表組件使用純 CSS 編寫，只需編寫 HTML 代碼即可生效。

色彩

背景色：透明背景。

文字顏色：在亮色主題下為黑色，在深色主題下為白色。

相關(guān)資料

Material Design 列表設(shè)計規(guī)范

樣式

純文本

這是一個最簡單的列表。

在線運行

使用鏈接作為列表條目。

在線運行

圖標

列表可以包含圖標。

在線運行

圖標可以在列表右側(cè)。

在線運行

用空圖標進行占位。

在線運行

頭像

列表可以包含頭像。

在線運行

頭像可以在列表右側(cè)。

在線運行

同時包含頭像和圖標。

在線運行

用圖標代替頭像。

在線運行

多行文本

每一個列表條目最多可包含 3 行文本，如果有超過 3 行的文本，就應(yīng)該使用 卡片 代替。

默認不限制文本的高度，即使文本高度超過了 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 的間距。

在線運行

去除分隔線的上下邊距。

在線運行

副標題

在列表中使用副標題時，會自動在副標題上方添加分割線。

在線運行

內(nèi)凹型副標題

在線運行

密集型列表

密集型列表的各個元素會更緊湊。

在線運行

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

在線運行

激活狀態(tài)

激活狀態(tài)的條目會添加背景色，并加粗文本。

在線運行

在線運行

CSS 類名列表

更多示例

文件列表

在線運行

通訊錄

在線運行