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

調(diào)用方式

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

色彩

背景色：透明背景。

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

相關(guān)資料

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

樣式

純文本

這是一個最簡單的列表。

在線運(yùn)行

使用鏈接作為列表?xiàng)l目。

在線運(yùn)行

圖標(biāo)

列表可以包含圖標(biāo)。

在線運(yùn)行

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

在線運(yùn)行

用空圖標(biāo)進(jìn)行占位。

在線運(yùn)行

頭像

列表可以包含頭像。

在線運(yùn)行

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

在線運(yùn)行

同時(shí)包含頭像和圖標(biāo)。

在線運(yùn)行

用圖標(biāo)代替頭像。

在線運(yùn)行

多行文本

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

默認(rèn)不限制文本的高度，即使文本高度超過了 3 行，也會照常顯示出來。可以在 .mdui-list-item-title 和 .mdui-list-item-text 上添加類來限制文本的高度：

• 添加類 .mdui-list-item-one-line 限制文本占一行高度
  
• 添加類 .mdui-list-item-two-line 限制文本占兩行高度
  
• 添加類 .mdui-list-item-three-line 限制文本占三行高度
  

在線運(yùn)行

分隔線

列表中的分隔線上下會有 8px 的間距。

在線運(yùn)行

去除分隔線的上下邊距。

在線運(yùn)行

副標(biāo)題

在列表中使用副標(biāo)題時(shí)，會自動在副標(biāo)題上方添加分割線。

在線運(yùn)行

內(nèi)凹型副標(biāo)題

在線運(yùn)行

密集型列表

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

在線運(yùn)行

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

在線運(yùn)行

激活狀態(tài)

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

在線運(yùn)行

在線運(yùn)行

CSS 類名列表

更多示例

文件列表

在線運(yùn)行

通訊錄

在線運(yùn)行