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

问题描述：

我正在Angular中构建Web应用程序。我一直在Materializecss和Angular Material之间来回走动。总的来说，我更喜欢Materialisecss，我使用Angular2-Materialize。唉，Materializecss尚未实现网格列表，我想知道如何使用Materializecss和Angular来实现它们吗？ Idealy，我正在寻找一个不使用JQuery的解决方案。如何使用Materializecss实现Material Design的网格列表

答

我想我会想出每行的嵌套循环，但我从来没有意识到，在Materializecss的网格系统中，它看起来像是如果添加更多的列比行通常可以包含（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>

正如你所看到的，没有嵌套的循环。只是列元素上的一个循环。

答

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

HTML和CSS例如：

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

：

<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插件

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

相关推荐