如何创建响应式(变化列数)Angular-Material卡网格

Question

我正在尝试创建一个Angular-Material卡网格,其行为有点像Bootstrap网格.理想情况下,对于小屏幕宽度,卡片将是全宽度的,并且在较大断点处跳转到两列.

用2张卡片演示

问题是AM为每张卡创建了列.我还没想出如何为每个断点指定列数.

用5张卡演示

这是我正在使用的标记的基础,它在第一个断点处从行到列采用卡布局:

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

SO上已经有类似的问题,但是接受的答案并不令人满意,因为它使用自定义CSS并且卡片不是流畅的.我没有找到其他类似的例子.

我想我可以使用Angular循环每两张卡并创建堆叠集,但这似乎是不必要的麻烦.我不得不认为Material提供了更好的解决方案.此外,这样的解决方案会在卡片高度不同的页面中留下空白.材料似乎面向类似砌体的柔性布局,我想坚持下去.

谢谢.

Answer 1

您可以使用材质Grid-List,它允许自定义col-spans并在宽度更改时设置更改动画.

我从网站上调整了样本并添加md-card了内容.确保添加layout-fill的md-card.您可以轻松调整样品的柱数.

http://codepen.io/anon/pen/QypjWY

我还调整了你的5张卡样本.您需要知道卡的高度才能使用网格列表,但您可以轻松地在小屏幕上实现100%的高度.您可以为行使用比率或固定的CSS高度,然后以灵活的方式显示内容是您的卡工作.

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

编辑:

如果你正在寻找某种交错的网格,那么你必须添加一个库:angular-deckgrid,它只提供网格布局,内容中的所有内容都是angular-material.与angular-masonry不同,这个库没有任何依赖关系.如果您不担心添加jQuery等,那么您也可以使用angular-masonry.

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

甲板布局的重要部分是CSS配置.使用此功能,您可以配置列数及其宽度.我使用了角度材质sm断点的媒体查询来切换到单列布局.

.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和一个简单的指令来使用它:angular-masonry-directive.这是一个例子,它与另一个类似.

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