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

調(diào)用方式

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

相關(guān)資料

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

樣式

基本樣式

在線(xiàn)運(yùn)行

操作欄文本

在線(xiàn)運(yùn)行

操作欄可以包含兩行文本

在線(xiàn)運(yùn)行

操作欄按鈕

在線(xiàn)運(yùn)行

操作欄樣式

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

在線(xiàn)運(yùn)行

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

在線(xiàn)運(yùn)行

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

在線(xiàn)運(yùn)行

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

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

在線(xiàn)運(yùn)行

CSS 類(lèi)名列表