如何使用 Materializecss 实现 Material Design 的网格列表答案

【问题标题】：How to implement Material Design's Grid List using Materializecss如何使用 Materializecss 实现 Material Design 的网格列表
【发布时间】：2018-01-19 07:00:52
【问题描述】：

我正在使用 Angular 构建网络应用程序。我一直在Materializecss 和Angular Material 之间来回走动。总的来说，我更喜欢与 Angular2-Materialize 一起使用的 Materializecss。唉，Materializecss 还没有实现网格列表，我想知道如果我使用 Materializecss 和 Angular 如何实现它们？理想情况下，我正在寻找不使用 JQuery 的解决方案。

【问题讨论】：

标签： angular material-design angular-material materialize

【解决方案1】：

我以为我必须为每一行提供嵌套循环，但我从未意识到在 Materializecss 的网格系统中，如果添加的列数超过一行通常可以包含的列数 (12)，列数实际上会包裹在下面。它仍将包含在同一个行元素中，但在视觉上你会得到一个格式整齐的网格。例如，这是我的 HTML。

<div class="container">
  <div class="row">
    <div class="col s2" *ngFor="let card of cards">
      <div class="card small">
        <div class="card-image">
          <img src="...">
          <span class="card-title">Card Title</span>
        </div>
        <div class="card-content">
          <p>{{card}}</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
  </div>
</div>

如您所见，没有嵌套循环。只是列元素上的一个循环。

【讨论】：

【解决方案2】：

你应该看看这个 NPM 包！ https://www.npmjs.com/package/materialize-grid-list

HTML 和 CSS 示例：

<div class="grid-list">
  <div class="grid-cell">
    <div class="grid-tile">
      <a href="#!"><img class="responsive-img" src="img/1.png" /></a>
    </div>
  </div>
  <div class="grid-cell">
    <div class="grid-tile">
      <a href="#!"><img class="responsive-img" src="img/2.png" /></a>
    </div>
  </div>
  <div class="grid-cell">
    <div class="grid-tile">
      <a href="#!"><img class="responsive-img" src="img/3.png" /></a>
    </div>
  </div>
  <div class="grid-cell">
    <div class="grid-tile">
      <a href="#!"><img class="responsive-img" src="img/4.png" /></a>
    </div>
  </div>
  <div class="grid-cell">
    <div class="grid-tile">
      <a href="#!"><img class="responsive-img" src="img/5.png" /></a>
    </div>
  </div>
  <div class="grid-cell">
    <div class="grid-tile">
      <a href="#!"><img class="responsive-img" src="img/6.png" /></a>
    </div>
  </div>
  <div class="grid-cell">
    <div class="grid-tile">
      <a href="#!"><img class="responsive-img" src="img/7.png" /></a>
    </div>
  </div>
  <div class="grid-cell">
    <div class="grid-tile">
      <a href="#!"><img class="responsive-img" src="img/8.png" /></a>
    </div>
  </div>
</div>

然后通过 :

调用 JQuery 插件

$('.grid-list').materialGrid();

【讨论】：