codecamp

网格列表

网格列表由一系列的单元格构成，它通常用于展示相册。它可以和网格布局系统配合使用进行布局。

调用方式

网格列表组件使用纯 CSS 编写，只需编写 HTML 代码即可生效。

相关资料

Material Design 网格列表设计规范

样式

基本样式

www.mdui.org - 网格列表 - 基本样式

操作栏文本

www.mdui.org - 网格列表 - 操作栏文本

操作栏可以包含两行文本

www.mdui.org - 网格列表 - 操作栏两行文本

操作栏按钮

www.mdui.org - 网格列表 - 操作栏按钮

操作栏样式

在 .mdui-grid-tile-actions 上添加类 .mdui-grid-tile-actions-top 可以使操作栏位于单元格顶部。

www.mdui.org - 网格列表 - 操作栏位于单元格顶部

在 .mdui-grid-tile-actions 上添加类 .mdui-grid-tile-actions-transparent 可以使操作栏拥有透明背景。

www.mdui.org - 网格列表 - 操作栏拥有透明背景

在 .mdui-grid-tile-actions 上添加类 .mdui-grid-tile-actions-gradient 可以使操作栏拥有渐变背景。

www.mdui.org - 网格列表 - 操作栏拥有渐变背景

利用网格布局系统进行布局

在等分列的 .mdui-row-* 上添加类 .mdui-grid-list，能将单元格之间的间距调整为 4px。

www.mdui.org - 网格列表 - 使用网格布局系统进行布局

CSS 类名列表

类名	效果
.mdui-grid-tile	定义一个网格列表的瓦片。
.mdui-grid-tile-actions	定义瓦片中的操作栏。
.mdui-grid-tile-actions-top	使操作栏位于瓦片顶部。
.mdui-grid-tile-actions-transparent	使操作栏拥有透明背景。
.mdui-grid-tile-actions-gradient	使操作栏拥有渐变背景。
.mdui-grid-tile-text	定义瓦片操作栏中的文本。
.mdui-grid-tile-title	定义瓦片操作栏文本中的标题。
.mdui-grid-tile-subtitle	定义瓦片操作栏文本中的副标题。
.mdui-grid-tile-buttons	定义瓦片操作栏中的按钮区域。
.mdui-grid-list	定义网格列表。配合网格布局系统使用时。

温馨提示

下载编程狮App，免费阅读超1000+编程语言教程

取消

确定

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }