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