如何创建带有角材料的卡片网格? [英] how do i create a grid of cards with angular material?
问题描述
我正在尝试使用 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>查看更多</md-button>
</md-card><br>
如何遍历数组并以三行显示卡片?我看了这篇文章和这篇文章 但我不知道它们如何应用于 角度材料
我已经创建了与您可能想要的类似的东西.md-card
包含在具有 layout-wrap
的 div
中.div是读取后动态生成的.
代码如下:
<md-card style="width: 350px;"ng-repeat="用户中的用户"><img src="http://placehold.it/150x150" class="md-card-image" alt="用户头像"><md-card-content><h2>{{用户}}</h2><p>Lorem ipsum dolor sat 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>保存</md-button><md-button>查看</md-button></md-card>
卡片宽度可以通过内联样式进行调整,希望对您有所帮助.
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.
<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 post and this post but I do not see how they apply to angular material
I have created something similar to what you may want. The md-card
is wrapped within a div
having layout-wrap
. The divs are dynamically generated after reading.
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.
这篇关于如何创建带有角材料的卡片网格?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!