如何创建响应式(不同列数)Angular-Material 卡片网格 [英] How to create a responsive (varying column count) Angular-Material card grid
问题描述
我正在尝试创建一个 Angular-Material 卡片网格,它的行为有点像 Bootstrap 网格.理想情况下,卡片将在小屏幕宽度时全角显示,并在较大断点处跳转到两列.
问题是 A-M 为每张卡片创建列.我还没有弄清楚如何为每个断点指定列数.
这是我使用的标记的基础,它在第一个断点处将卡片布局从行到列:
<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.
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.
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屋!
查看全文