使用Angular Material 2动态创建纸牌网格 [英] Creating Grid of Cards Dynamically using Angular Material 2
问题描述
您好，我是Angular Material的新手，我想动态创建格式为r行c列(r X c)的纸牌网格.例如，如果我有5个用户，则应按如下所示创建r=3和c=2.
Hi I am new to Angular Material and I want to create grid of cards of the form r rows c columns (r X c) dynamically. e.g If I have 5 users then it should create r=3 and c=2 as follows.
user1 user2
user3 user4
user5
我实现了以下目标:
<md-grid-list cols="2" rowHeight="200px" gutterSize="10px">
<md-grid-tile class="divcls" *ngFor="let user1 of users">
<md-card fxLayoutWrap="wrap" fxLayout="column" fxFlex="90%" fxLayoutGap="16px">
<md-card-title>User : {{user1.name}}</md-card-title>
<md-card-content>{{user1.details}}</md-card-content>
<md-card-actions>
<button md-button>LIKE</button>
<button md-button>SHARE</button>
</md-card-actions>
</md-card>
</md-grid-tile>
</md-grid-list>
这是正确的方法吗?因为当我尝试调整窗口大小时，它将与卡片和网格单元重叠.我在Internet上进行了检查，但是没有找到任何带有纯角度材料方式的干净方法.请指导我使用比上述更好的方法来实现相同的目标.
Is this right approach? Because when I try to resize the windows it will overlap with card and grid cell. I checked on internet but didn't find any clean approach with pure angular material way. Please guide me to achieve the same with better approach than above.
推荐答案
我有一个类似的任务，即创建要动态显示/过滤的产品列表.
Well I had a similar task with creating a list of products to be displayed / filtered dynamically.
首先，我建议创建一个负责显示卡的新组件.
First I would suggest to create a new component which is being responsible with displaying the card.
/* Card component */
<md-card>
<md-card-header>
<md-card-title class="md-card-title">{{cardTitle}}</md-card-title>
</md-card-header>
<img md-card-image [src]="cardImagePath">
<md-card-content>
<div class="card-text-content">
{{cardShortDescription}}
</div>
</md-card-content>
<md-card-actions fxLayout="row" fxLayoutAlign="end center">
<button md-button (click)="addProductToCart()">ADAUGA IN COS</button>
<button md-button (click)="openDialog()">DETALII</button>
</md-card-actions>
</md-card>
然后创建一个卡片组，其中装有您要显示的卡片组.
Then create a card-deck which holds the deck you want to display.
现在，为了与要展示的产品数量保持一致，并且要记住您可能需要分页并且还需要响应卡片，您必须显示一些响应卡片除以2、3、4、6(12或24)-用于卡片组响应并且您仍然希望所有行都显示卡片的情况.
Now in order to be consistent with the number of products you want to show, and also to keep in mind that you might want to have some pagination and also cards to be responsive, you have to display a number of cards which are divided by 2, 3, 4, 6 (12 or 24) - used for cases when the card deck is responsive and you still want to have all rows displayed with cards.
/*Card deck component */
<div fxLayout="row" fxFlex.md="70" fxLayoutWrap class="card-deck-container mat-elevation-z4">
<div fxFlex *ngFor="let product of productsDisplayed" class="card-item">
<app-card [ngStyle]="{'width':'300' + 'px'}" [product]="product"></app-card>
</div>
<div class="paginator mat-elevation-z4" *ngIf="productsDisplayed.length !== 0">
<md-paginator
[length]="paginatorSize"
[pageSize]="numberOfProductsDisplayedInPage"
[pageSizeOptions]="[12, 24]"
(page)="updateProductsDisplayedInPage($event)">
</md-paginator>
</div>
</div>
卡片组组件CSS
.card-deck-container {
width: 100%;
max-width: 1200px;
position: relative;
border-radius: 2px;
padding: 10px 10px 30px;
margin: 10px 10px 10px 10px;
background-color: #f5f5f5;
}
.card-item {
padding: 3px 3px 3px 3px;
}
这里的主要内容是CSS.卡片组容器的最大宽度为1200px，根据每张卡片的宽度，最多将填充4张卡片(4张卡* 300px = 1200px:一行). 如果容器变小，则卡片项目将继续在下一行(来自fxLayoutWrap的属性).
The main thing here is in CSS. The card deck container has a max-width of 1200px and depending on the width of each card, it will fill up the container with a maximum of 4 cards (4 cards * 300px = 1200px : one row). If the container goes smaller, the card item will go on next row (from the property of fxLayoutWrap).
我将很快发布一个例子.希望这可以帮助到那时. p.s.不要试图理解产品中的这些信息在说什么:)
I am going to post a plunker example soon. Hope this helps till then. p.s. Don't try to understand what those messages from products are saying :)
柱塞示例 https://plnkr.co/edit/egsNB7TLOI1HHzBgbTbP?p=preview (使用Google Chrome浏览器)
Plunker example https://plnkr.co/edit/egsNB7TLOI1HHzBgbTbP?p=preview (Use Google Chrome)
可以基于与可能的分页组件的交互来更改要显示的项目.但是，那么您将必须将所有产品/项目保留在一个数组中，并且您将拥有另一个要显示产品/项目的数组.
The items being displayed can be changed based on the interaction with a possible pagination component. But then you would have to keep all products/items in an array, and you would have another array with the products/items being displayed.
希望这会有所帮助:).
Hope this helps :).
也不要忘记Angular Flex项目:
Also don't forget about Angular Flex project:
- https://github.com/angular/flex-layout/wiki/响应式API
- https://github.com/angular/flex-layout/wiki/Declarative-API-概述
- https://tburleson-layouts-demos.firebaseapp.com/#/response
- https://github.com/angular/flex-layout/wiki/Responsive-API
- https://github.com/angular/flex-layout/wiki/Declarative-API-Overview
- https://tburleson-layouts-demos.firebaseapp.com/#/responsive
这篇关于使用Angular Material 2动态创建纸牌网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
