如何对网格角材料工作?

Question

>我使用Material Design并尝试以下代码：

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

什么意思？它显示 2 行 1 列？

Answer 1

Angular 有一个很好的例子来回答你的问题：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'},
];

在这里，标题中的每个对象都对应于角度材质网格中的项目。 rows属性用于设置每个项目的高度，默认情况下一行的高度为100px。因此，如果rows: 2任何项目，该项目的高度将为 200px。

参考资料：角度网格列表文档和 https://material.angular.io/components/grid-list/examples