如何工作到网格角材料？

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