如何创建响应式(不同列数)Angular-Material 卡片网格 [英] How to create a responsive (varying column count) Angular-Material card grid

问题描述

我正在尝试创建一个 Angular-Material 卡片网格，它的行为有点像 Bootstrap 网格.理想情况下，卡片将在小屏幕宽度时全角显示，并在较大断点处跳转到两列.

2 张卡片演示

问题是 A-M 为每张卡片创建列.我还没有弄清楚如何为每个断点指定列数.

5 张卡片演示

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

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

有一个关于SO的类似问题 已经，但接受的答案并不令人满意，因为它使用自定义 CSS 并且卡片不是流体宽度.我没有发现其他类似的例子.

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

谢谢.

解决方案

你可以使用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 flexmd-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.

<deckgrid class="deckgrid" flex source="data"><md-card>

甲板布局的重要部分是CSS 配置.使用此配置，您可以配置列数及其宽度.我已经使用媒体查询对角度材料 sm 断点切换到单列布局.

.deckgrid::before {内容:'4 .column.column-1-4';字体大小:0；可见性:隐藏；}.deckgrid .column {向左飘浮;}.deckgrid .column-1-4 {宽度:25%；}.deckgrid .column-1-1 {宽度:100%；}@media 屏幕和(最大宽度:960 像素){.deckgrid::before {内容:'1 .column.column-1-1';}}

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

编辑 2:

还有一个不需要 jQuery 的砌体版本和一个简单的指令来使用它:angular-masonry-directive.这是一个例子，它的工作原理与另一个类似.

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

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.

Demo with 2 cards

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.

Demo with 5 cards

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>

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.

Thanks.

解决方案

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

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://codepen.io/anon/pen/QypjWY

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/

Edit:

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>

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/

Edit 2:

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/

这篇关于如何创建响应式(不同列数)Angular-Material 卡片网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！