網(wǎng)格列表由一系列的單元格構(gòu)成，它通常用于展示相冊。它可以和網(wǎng)格布局系統(tǒng)配合使用進行布局。

調(diào)用方式

網(wǎng)格列表組件使用純 CSS 編寫，只需編寫 HTML 代碼即可生效。

相關(guān)資料

Material Design 網(wǎng)格列表設計規(guī)范

樣式

基本樣式

在線運行

操作欄文本

在線運行

操作欄可以包含兩行文本

在線運行

操作欄按鈕

在線運行

操作欄樣式

在 .mdui-grid-tile-actions 上添加類 .mdui-grid-tile-actions-top 可以使操作欄位于單元格頂部。

在線運行

在 .mdui-grid-tile-actions 上添加類 .mdui-grid-tile-actions-transparent 可以使操作欄擁有透明背景。

在線運行

在 .mdui-grid-tile-actions 上添加類 .mdui-grid-tile-actions-gradient 可以使操作欄擁有漸變背景。

在線運行

利用網(wǎng)格布局系統(tǒng)進行布局

在等分列的 .mdui-row-* 上添加類 .mdui-grid-list，能將單元格之間的間距調(diào)整為 4px。

在線運行

CSS 類名列表