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

How to create a responsive (varying column count) Angular-Material card grid

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

Demo with 2 cards

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

Demo with 5 cards

这是我使用的标记的基础,它在第一个断点处将卡片布局从行变为列:

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

已经有一个 ,但接受的答案并不令人满意,因为它使用自定义 CSS 并且卡片不是可变宽度的。我没有找到其他类似的例子。

我想我可以用 Angular 循环每两张卡片并创建堆叠集,但这似乎不必要地麻烦。我不得不认为 Material 提供了更好的解决方案。此外,此类解决方案会在卡片高度不同的页面中留下空白。 Material 似乎适合 Masonry 式的弹性布局,我想坚持下去。

谢谢。

您可以使用 material Grid-List,它允许自定义 col-spans 并在宽度变化时动画变化。

我改编了网站上的示例并在内容中添加了 md-card。确保在 md-card 上添加 layout-fill。 您可以轻松地根据您的列数调整样本。

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

我也改编了你的5张牌样本。您需要知道卡片的高度才能使用 Grid-List,但您可以在小屏幕上轻松实现 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, it just provides the grid layout, everything in the content is angular-material. Unlike angular-masonry该库没有任何依赖项。如果您不担心添加 jQuery 之类的内容,那么您也可以使用 angular-masonry.

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

甲板布局的重要部分是 CSS configuration。有了这个,您可以配置列数及其宽度。我对 angular-material 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/

如果我对问题的理解正确,这就像一个魅力:

<body ng-app="app" ng-cloak>
  <div layout="column" layout-gt-sm="row" layout-wrap>
  <div flex="25" flex-gt-sm="50" ng-repeat="i in [1,2, 3, 4, 5] track by $index">
    <md-card>
     <!--  You code-->
    </md-card>
  </div>
  </div>
</body>

具有多个断点的 Plunker:(调整内部 window,而不是浏览器 window) http://plnkr.co/edit/8QPYdzLD8qzEbdz5sesE?p=preview

plunker 已更新以显示不同高度的卡片。
已经制定了2个指令,所以所有卡片的最大高度都保存在内存中,并且这个指令适用于所有卡片。

<div  ng-repeat="i in [1,2, 3, 4, 5] track by $index" flex-xs="100" flex-sm="50" flex-md="50" flex="33">
<md-card>

  <md-card-title >
    <md-card-title-text >
      <span class="md-headline">Demo Title {{i}}</span>
      <span class="md-subhead">Demo Description</span>
    </md-card-title-text>    
  </md-card-title>
</md-card>
</div>

检查这个例子:http://codepen.io/ktn/pen/jqNBOe

如果我理解你的问题的话 然后使用此代码并将 hello 替换为您喜欢的任何内容

<md-grid-list md-cols-lg="12" md-cols-gt-lg="15" md-cols-xs="3" md-cols-sm="6" md-cols-md="9" md-row-height-gt-md="1:1" md-row-height-md="1:1" md-row-height="1:2" md-gutter-gt-md="16px" md-gutter-md="8px" md-gutter="4px">
            <md-grid-tile ng-repeat="contact in contacts" md-colspan="3" md-rowspan-gt-sm="4" style="background:red;">
                hello
            </md-grid-tile>
        </md-grid-list>