如何工作到網格角材料？

Question

我用的材料設計與試試這個代碼：

tiles = [ 
    {text: 'One', cols: 1, rows: 2, color: 'lightblue'} 
    ]; 

是什麼意思？它顯示2行1列？

Answer 1

角有回答您的問題一個美麗的例子：https://material.angular.io/components/grid-list/examples

md-grid-list組件通過指定屬性cols="4"定義網格將列數。然後在裏面提供一個md-grid-tile組件的列表（示例角度使用使用ngFor，我希望你熟悉它）。

所以，如果你想建立矩陣5v7，然後嘗試：

<md-grid-list cols="7" rowHeight="100px"> 
    <md-grid-tile 
     *ngFor="let tile of tiles" 
     [colspan]="tile.cols" 
     [rowspan]="tile.rows" 
     [style.background]="tile.color"> 
    {{tile.text}} 
    </md-grid-tile> 
</md-grid-list> 

和

@Component({ 
    selector: 'grid-list-dynamic-example', 
    templateUrl: 'grid-list-dynamic-example.html', 
}) 
export class GridListDynamicExample { 
    tiles = [ 
    {text: 'One', cols: 1, rows: 1, color: 'lightblue'}, 
    {text: 'Two', cols: 1, rows: 1, color: 'lightblue'}, 
    {text: 'etc', cols: 1, rows: 1, color: 'lightblue'}, 
    {text: 'etc', cols: 1, rows: 1, color: 'lightblue'}, 
    {text: 'etc', cols: 1, rows: 1, color: 'lightblue'}, 
    {text: 'etc', cols: 1, rows: 1, color: 'lightblue'}, 
    {text: 'etc', cols: 1, rows: 1, color: 'lightblue'}, 
    {text: '...', cols: 1, rows: 1, color: 'lightblue'}, 
    ]; 
} 

Answer 2

讓我打破它，首先讓我們來看看HTML

<md-grid-list cols="4" rowHeight="100px"> 
    <md-grid-tile 
     *ngFor="let tile of tiles" 
     [colspan]="tile.cols" 
     [rowspan]="tile.rows" 
     [style.background]="tile.color"> 
    {{tile.text}} 
    </md-grid-tile> 
</md-grid-list> 

cols屬性，用於設置網格中的列數。因此，在這種情況下，每行被分成4列。

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

在這裏，在標題的每個對象對應於所述項目中的角材料網格：如下所示

接下來的事情是使瓦片到電網。 行屬性用於設置每個項目的高度，默認一行的高度爲100px。所以如果rows: 2任何項目，該項目將有一個200px的高度。

參考：Angular grid-list documentaion和 https://material.angular.io/components/grid-list/examples