Question

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

Answer 1

我认为我必须为每一行提出嵌套循环，但我从未意识到在Materializecss的网格系统中看起来如果你添加的cols比一行通常可以包含的更多cols（12），cols实际上是包裹在下面。它仍然包含在同一行元素中，但在视觉上你会得到一个整齐格式的网格。这是我的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>

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

Answer 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();

如何使用Materialisecss实现Material Design的网格列表

2 个答案: