如何创建一个响应（不同列数）角物料卡网 [英] How to create a responsive (varying column count) Angular-Material card grid

问题描述

我试图创造的角度，材料卡，一个网格，行为有点像引导电网。理想情况下，卡将全宽为小屏幕宽度和在较大的断点跳转到两列。

I'm trying to create a grid of Angular-Material cards that behaves somewhat like a Bootstrap grid. Ideally, cards will be full-width for small screen widths and jump to two columns at larger breakpoints.

演示用2张卡

问题是，A-M每张卡创建列。我还没有想出如何指定每个断点列数。

The problem is that A-M creates columns for each card. I haven't figured out how to specify the number of columns for each breakpoint.

演示用5张

下面是我使用的标记，这需要来自行卡的布局，列在第一个断点的基础：

Here's the basis of the markup I'm using, which takes the card layout from rows to columns at the first breakpoint:

<div ng-app layout="column" layout-gt-sm="row" class="layout-sm-column layout-row">
  <div flex class="flex" ng-repeat="i in [1,2,3,4,5] track by $index">
    <md-card>

有一个<一个href=\"http://stackoverflow.com/questions/31726180/trying-to-have-a-grid-of-card-with-angular-material\">similar在SO 已经的问题，但接受的答案是不能令人满意的，因为它使用自定义的CSS和卡不流体宽度。我没有发现其他类似的例子。

There's a similar question on SO already, but accepted answer is unsatisfactory as it uses custom CSS and the cards aren't fluid-width. I've found no other similar examples.

我想我可以每两卡环与角度，创造叠套，但似乎不必要的繁琐。我认为，材料提供了更好的解决方案。此外，这些解决方案会留下空白的页面，卡的高度变化。材质似乎面向朝着砌体般弯曲的布局，我想坚持这一点。

I suppose I could loop every two cards with Angular and create stacked sets, but that seems needlessly cumbersome. I have to think that Material provides for a better solution. Also, such solutions would leave whitespace in the page where cards vary in height. Material seems geared toward a Masonry-like flex layout, and I'd like to stick with that.

感谢。

推荐答案

您可以使用材料网格列表，它允许定制COL-跨度和动画的变化时，宽度的变化。

You can use the material Grid-List, it allows for custom col-spans and animates the changes when the width changes.

我适应从网站的样本，并在内容中加入 MD-卡。确保添加布局填充的 MD-卡。
您可以轻松地调整实例为您列数。

I adapted the sample from the site and added md-card in the contents. Make sure to add layout-fill on the md-card. You can easily adapt the sample for your column count.

HTTP：//$c$cpen.io/anon/pen/QypjWY

我也适应你的5卡的样品。你需要知道卡片的高度，以使用网格的列表，但你可以轻松实现在小屏幕上100％的高度。您可以使用比率或固定的CSS高度为行，那么它就是你的卡的工作，以显示一种灵活的方式的内容。

I also adapted your 5 card sample. You need to know the height of the cards in order to use the Grid-List, but you can easily achieve the 100% height on small screens. You can use ratios or fixed CSS heights for the rows and then it is your cards job to display the content in a flexible way.

<md-grid-list ng-app="app" layout-fill flex
    md-cols-sm="1"
    md-cols-md="2"
    md-cols-gt-md="5"
    md-row-height-sm="100%"
    md-row-height="600px"
    md-gutter="8px">
    <md-grid-tile ng-repeat="i in [1,2,3,4,5] track by $index">
        <md-card layout-fill>

http://jsfiddle.net/2afaok1n/34/

编辑：

如果您是不是在寻找某种交错网格的，那么你必须添加库：角deckgrid ，它只是提供了网格布局，一切都在内容角的材料。不同于角砌筑这个库没有任何相关性。如果你不担心增加的jQuery之类的，那么你也可以使用角砖石。

If you are instead looking for some kind of staggered grid, then you have to add a library: angular-deckgrid, it just provides the grid layout, everything in the content is angular-material. Unlike angular-masonry this library doesn't have any dependencies. If you are not worried about adding jQuery and the like then you can also use angular-masonry.

<div ng-app="app" ng-controller="DeckController" flex layout="column">
   <deckgrid class="deckgrid" flex source="data">
       <md-card>

在甲板布局的重要组成部分，是 CSS配置。与此配置列和它们的宽度的数量。我已经使用了角材料 SM 断点媒体查询切换到单列布局。

The important part for the deck layout is the CSS configuration. With this you configure the number of columns and their width. I have used a media query for the angular-material sm breakpoint to switch to single column layout.

.deckgrid::before {
  content: '4 .column.column-1-4';
  font-size: 0;
  visibility: hidden;
}

.deckgrid .column {
  float: left;
}

.deckgrid .column-1-4 {
  width: 25%;
}

.deckgrid .column-1-1 {
  width: 100%;
}

@media screen and (max-width: 960px) {
  .deckgrid::before {
    content: '1 .column.column-1-1';
  }
}

http://jsfiddle.net/2afaok1n/39/

编辑2：

还有一个砖石版本，它不需要jQuery和一个简单的指令，使用它：角砖混指令。这里是一个例子，它的工作原理类似的另一个。

There is also a masonry version which doesn't require jQuery and a simple directive to use it: angular-masonry-directive. Here is an example, it works similar to the other one.

http://jsfiddle.net/xjnp97ye/1/

这篇关于如何创建一个响应（不同列数）角物料卡网的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！