Javascript 如何创建带有角材料的卡片网格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31823056/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how do i create a grid of cards with angular material?
提问by Connor Leech
I am trying to create a grid of three cards per row using ng-repeat. I have a normal array of javascript objects attached to the scope. The code below will create a fresh row for every card.
我正在尝试使用 ng-repeat 创建每行三张卡片的网格。我有一个普通的 javascript 对象数组附加到范围。下面的代码将为每张卡片创建一个新行。
<div layout="row" ng-repeat='post in posts' layout-fill="" layout-align="">
<md-card>
<md-card-content>
<h2 class="md-title">{{post.title}}</h2>
<p>
{{post.summary}}
</p>
</md-card-content>
<div class="md-actions" layout="row" layout-align="end center">
<md-button>View More</md-button>
</div>
</md-card>
<br>
How can I iterate over my array and display the cards in rows of three? I looked at this postand this postbut I do not see how they apply to angular material
回答by
I have created something similar to what you may want. The md-cardis wrapped within a divhaving layout-wrap. The divs are dynamically generated after reading.
我已经创建了与您可能想要的类似的东西。所述md-card被内包装div具有layout-wrap。div 是在阅读后动态生成的。
Here is the code :
这是代码：
<div class='md-padding' layout="row" layout-wrap>
<md-card style="width: 350px;" ng-repeat="user in users">
<img src="http://placehold.it/150x150" class="md-card-image" alt="user avatar">
<md-card-content>
<h2>{{user}}</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</md-card-content>
<div class="md-actions" layout="row" layout-align="end center">
<md-button>Save</md-button>
<md-button>View</md-button>
</div>
</md-card>
</div>
The cards width can be adjusted with inline styling, hope it helps.
卡片宽度可以通过内联样式进行调整，希望对您有所帮助。
回答by Jaime Gómez
I just needed this; here's a more comprehensive solution, only using the layout features, for 3 columns:
我只是需要这个；这是一个更全面的解决方案，仅使用布局功能，用于 3 列：
<md-content class="md-padding" layout="row" layout-wrap>
<div flex="33" ng-repeat="i in [1,2,3,4,5,6,7]">
<md-card>
// ...
</md-card>
</div>
</md-content>
The card must be wrappedinside a correctly-sized div to keep the margins under control and avoid overflow.
卡片必须包裹在正确大小的 div 中，以控制边距并避免溢出。
回答by sGambolati
To be compling to material/angular, you must use flex attr to md-card. Flex attr will give you a proportional width about its parent.
要符合材料/角度，您必须使用 flex attr 到 md-card。Flex attr 将为您提供关于其父级的比例宽度。
<div class='md-padding' layout="row" layout-wrap>
<md-card flex="40" flex-sm="80" ng-repeat="user in users">
<img src="http://placehold.it/150x150" class="md-card-image" alt="user avatar">
<md-card-content>
<h2>{{user}}</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</md-card-content>
<div class="md-actions" layout="row" layout-align="end center">
<md-button>Save</md-button>
<md-button>View</md-button>
</div>
</md-card>
</div>
In this example, you will have two cards (40% each) and when the screen resizes to -sm, the cards will be at 80%.
在此示例中，您将有两张卡片（每张 40%），当屏幕调整为 -sm 时，卡片将位于 80%。
回答by Nishān Wickramrathna
You can use class="grid-container"for this.
As an example a code snippet like this,
您可以class="grid-container"为此使用。以这样的代码片段为例，
<div class="grid-container">
<mat-grid-list cols="2" rowHeight="350px">
<mat-grid-tile [colspan]="1" [rowspan]="1">
<mat-card class="mat-elevation-z8 card-prop"> CARD 1
</mat-card>
</mat-grid-tile>
<mat-grid-tile [colspan]="1" [rowspan]="2">
<mat-card class="mat-elevation-z8 card-prop"> CARD 2
</mat-card>
</mat-grid-tile>
<mat-grid-tile [colspan]="1" [rowspan]="1">
<mat-card class="mat-elevation-z8 card-prop"> CARD 3
</mat-card>
</mat-grid-tile>
</mat-grid-list>
</div>
Will produce an output similar to this.
将产生与此类似的输出。
