如何在Angular 2材質中的md-grid-tile中嵌入md卡？

我遵循https://material.angular.io/components上給出的例子，並試圖將「X」數量的卡放在同一個「行」中。爲了做到這一點，我在md-grid-tile中嵌套了一張md-card。如何在Angular 2材質中的md-grid-tile中嵌入md卡？

下面是我在做https://plnkr.co/edit/S8QkPOT8o34jWCO85S8P?p=preview

什麼？如果想通了，MD-網格磚具有溢出plunker：隱藏CSS規則，如果我更改爲overflow：visible我可以看到整個MD -dd-grid-tile內的卡片

md-grid-tile { 
    display: block; 
    position: absolute; 
    overflow: visible; 
}

這是可以嗎？或者我怎樣才能在同一個「行」中安排X張牌？我應該用另一種方法嗎？

謝謝。

來源

2017-02-01 Guille Acosta

檢查此答案，也許它有幫助。 https://stackoverflow.com/questions/44995971/creating-grid-of-cards-dynamically-using-angular-material-2/45856258#45856258 –

您不應該在md-grid-tile或任何其他內嵌入md卡。

爲了實現這樣的德興：

你只需要設置一個正確的寬度MD卡，默認情況下，MD-卡被設置爲100％。這裏是一個plunker https://plnkr.co/edit/R7mhv59gAG6bZRbEuNKe?p=preview來看到兩個MD-卡上的「同一行」使用這個CSS規則：

.example-card { 
    display: inline-block; 
    width: 30%; 
    margin: 20px; 
    vertical-align: top; 
    cursor: pointer; 
}

來源

2017-02-02 14:35:12

謝謝。到處搜索如何做到這一點。這應該被標記爲答案！ – tmoore

我能夠MD-網格區塊中的使用嵌套MD卡來實現它。問題在於.mat-figure的屬性「align-items：center」。這裏是我的解決方案：

**Component:** 

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    templateUrl: './abc.component.html', 
    styleUrls: ['./abc.component.css'] 
}) 
export class AbcComponent implements OnInit { 
    ngOnInit() { 

    } 

    tiles = [ 
    {text: 'One', cols: 1, rows: 1, color: 'lightblue'}, 
    {text: 'Two', cols: 1, rows: 1, color: 'lightgreen'}, 
    {text: 'Three', cols: 1, rows: 1, color: 'lightpink'}, 
    {text: 'Four', cols: 1, rows: 1, color: '#DDBDF1'}, 
    {text: 'Five', cols: 1, rows: 1, color: '#DDBDF1'}, 
    {text: 'Six', cols: 1, rows: 1, color: '#DDBDF1'}, 
    ]; 

} 

**abc.component.html file content:** 

<md-grid-list cols="3"> 
    <md-grid-tile 
     *ngFor="let tile of tiles" 
     [colspan]="tile.cols" 
     [rowspan]="tile.rows" 
     [style.background]="tile.color"> 

    <md-card class="square_board">HI</md-card> 
    </md-grid-tile> 
</md-grid-list> 

**abc.component.css file content:** 

.square_board{ 
    margin: 10px; 
    width: 100%; 
} 

::ng-deep md-grid-tile.mat-grid-tile .mat-figure { 
    align-items: initial; /*vertical alignment*/ 
}

下面是結果：

這種方法的benifit是，我們不必在乎卡的間距和位置。

來源

2017-08-11 17:33:54

如何在Angular 2材質中的md-grid-tile中嵌入md卡？

回答

相關問題