Example
<div class="mdui-grid-tile">
<a href="javascript:;"><img src="card.jpg"/></a>
</div>
Example
<div class="mdui-grid-tile">
<a href="javascript:;"><img src="card.jpg"/></a>
<div class="mdui-grid-tile-actions">
<div class="mdui-grid-tile-text">
<div class="mdui-grid-tile-title">Halcyon Days</div>
</div>
</div>
</div>
Example
Halcyon Days
grid_onEllie Goulding
<div class="mdui-grid-tile">
<a href="javascript:;"><img src="card.jpg"/></a>
<div class="mdui-grid-tile-actions">
<div class="mdui-grid-tile-text">
<div class="mdui-grid-tile-title">Halcyon Days</div>
<div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">grid_on</i>Ellie Goulding</div>
</div>
</div>
</div>
Example
Halcyon Days
grid_onEllie Goulding
<div class="mdui-grid-tile">
<img src="card.jpg"/>
<div class="mdui-grid-tile-actions">
<div class="mdui-grid-tile-text">
<div class="mdui-grid-tile-title">Halcyon Days</div>
<div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">grid_on</i>Ellie Goulding</div>
</div>
<div class="mdui-grid-tile-buttons">
<button class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">star_border</i></button>
</div>
</div>
</div>
操作栏样式
在 .mdui-grid-tile-actions
上添加类 .mdui-grid-tile-actions-top
可以使操作栏位于单元格顶部。
Example
<div class="mdui-grid-tile">
<img src="card.jpg"/>
<div class="mdui-grid-tile-actions mdui-grid-tile-actions-top">
<div class="mdui-grid-tile-text">
<div class="mdui-grid-tile-title">Halcyon Days</div>
</div>
</div>
</div>
在 .mdui-grid-tile-actions
上添加类 .mdui-grid-tile-actions-transparent
可以使操作栏拥有透明背景。
Example
<div class="mdui-grid-tile">
<img src="card.jpg"/>
<div class="mdui-grid-tile-actions mdui-grid-tile-actions-transparent">
<div class="mdui-grid-tile-text">
<div class="mdui-grid-tile-title">Halcyon Days</div>
</div>
</div>
</div>
在 .mdui-grid-tile-actions
上添加类 .mdui-grid-tile-actions-gradient
可以使操作栏拥有渐变背景。
Example
<div class="mdui-grid-tile">
<img src="card.jpg"/>
<div class="mdui-grid-tile-actions mdui-grid-tile-actions-gradient">
<div class="mdui-grid-tile-text">
<div class="mdui-grid-tile-title">Halcyon Days</div>
</div>
</div>
</div>
利用网格布局系统进行布局
在等分列的 .mdui-row-*
上添加类 .mdui-grid-list
,能将单元格之间的间距调整为 4px。
Example
<div class="mdui-row-xs-3 mdui-row-sm-4 mdui-row-md-5 mdui-row-lg-6 mdui-row-xl-7 mdui-grid-list">
<div class="mdui-col">
<div class="mdui-grid-tile">
<img src="card.jpg"/>
</div>
</div>
<div class="mdui-col">
<div class="mdui-grid-tile">
<img src="card.jpg"/>
</div>
</div>
<div class="mdui-col">
<div class="mdui-grid-tile">
<img src="card.jpg"/>
</div>
</div>
<div class="mdui-col">
<div class="mdui-grid-tile">
<img src="card.jpg"/>
</div>
</div>
<div class="mdui-col">
<div class="mdui-grid-tile">
<img src="card.jpg"/>
</div>
</div>
<div class="mdui-col">
<div class="mdui-grid-tile">
<img src="card.jpg"/>
</div>
</div>
<div class="mdui-col">
<div class="mdui-grid-tile">
<img src="card.jpg"/>
</div>
</div>
<div class="mdui-col">
<div class="mdui-grid-tile">
<img src="card.jpg"/>
</div>
</div>
</div>
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 |
定义网格列表。配合网格布局系统使用时。 |