问题描述
限时送ChatGPT账号..我一直在尝试使用角材料制作卡片网格.所以我使用指令 md-grid-list 和 md-card.但结果非常难看,我不确定如何理解 md-row-heigh(比率)的工作原理,我有文档,但没有说明太多.
这是我到目前为止所做的:http://codepen.io/stunaz/pen/qdQwbq ,我正在尝试使用响应式卡片网格,而不是甚至确定 md-grid-list 在这里是否合适.
<md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6" md-row-height="300px" md-gutter="12px" md-gutter-gt-sm="8px"><md-grid-tile class="gray" ng-repeat="user in users"><md-card><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></md-grid-tile>
我愿意接受任何形式的帮助.
解决方案你可以使用 FlexBox 代替 md-grid-list 具有相同的效果.
<div layout="row" flex><div class="parent" layout="column" ng-repeat="user in users" flex>...您的内容在这里
看看这个例子,一行中有固定数量的卡片:
http://codepen.io/anon/pen/bdQJxy
还有一个响应式示例,使用 Wrap 布局
http://codepen.io/anon/pen/MwzRde
希望这是你想要的.
I have been trying to have a grid of card using angular-material. So I am using the directives md-grid-list and md-card. but the result is pretty ugly, and I am not sure to understand how the md-row-heigh (ratio) works, I have the documentation, but it doesn't say a lot.
Here is what I have been doing so far : http://codepen.io/stunaz/pen/qdQwbq , I am trying to have a responsive grid of card, not even sure if the md-grid-list is appropriate here.
<md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6" md-row-height="300px" md-gutter="12px" md-gutter-gt-sm="8px">
<md-grid-tile class="gray" ng-repeat="user in users">
<md-card>
<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>
</md-grid-tile>
I am open to any kind of help.
解决方案You could use Flex Box instead of md-grid-list to have the same effect.
<div class='md-padding' layout="row" flex>
<div layout="row" flex>
<div class="parent" layout="column" ng-repeat="user in users" flex>
... Your content here
</div>
</div>
</div>
Take a look at this Example with fixed number of cards in a row:
http://codepen.io/anon/pen/bdQJxy
And a responsive example, using Wrap layout
http://codepen.io/anon/pen/MwzRde
Hope this is what you wanted.
这篇关于尝试使用带角材料的卡片网格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论