網(wǎng)格列表

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

調(diào)用方式

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

相關(guān)資料

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

樣式

基本樣式

在線運(yùn)行

操作欄文本

在線運(yùn)行

操作欄可以包含兩行文本

在線運(yùn)行

操作欄按鈕

在線運(yùn)行

操作欄樣式

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

在線運(yùn)行

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

在線運(yùn)行

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

在線運(yùn)行

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

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

在線運(yùn)行

CSS 類名列表