menuMDUI文档
color_lens
near_me
开始使用
keyboard_arrow_down
简介下载兼容性JavaScript 工具库JavaScript 全局方法从 0.4.3 升级到 1.0.0
layers
样式
keyboard_arrow_down
颜色与主题字体网格布局排版图标媒体辅助类阴影
widgets
组件
keyboard_arrow_down
涟漪动画效果按钮浮动操作按钮下拉选择分隔线可扩展面板文本框选择控件滑块列表列表控制网格列表Tab 选项卡工具栏应用栏抽屉式导航底部导航栏卡片纸片工具提示Snackbar表格对话框菜单进度指示器
view_carousel
JavaScript 插件
keyboard_arrow_down
CollapseHeadroom
local_mall
资源
keyboard_arrow_down
Material 图标

网格列表

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

调用方式

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

相关阅读

Material Design 设计指南：组件 - 网格列表

样式

基本样式

codeplay_arrow
Example
<div class="mdui-grid-tile">
  <a href="javascript:;"><img src="card.jpg"/></a>
</div>

操作栏文本

codeplay_arrow
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>

操作栏可以包含两行文本

codeplay_arrow
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 class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">grid_on</i>Ellie Goulding</div>
    </div>
  </div>
</div>

操作栏按钮

codeplay_arrow
Example
<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 可以使操作栏位于单元格顶部。

codeplay_arrow
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 可以使操作栏拥有透明背景。

codeplay_arrow
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 可以使操作栏拥有渐变背景。

codeplay_arrow
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。

codeplay_arrow
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定义网格列表。配合网格布局系统使用时。
arrow_backPrevious
列表控制
arrow_forwardNext
Tab 选项卡