Angular Material - 如何正确设置 Angular Material 特定的仪表板网格？

Question

我在为特定仪表板设置正确的 Angular Material 网格时遇到问题。我需要帮助设置适当的边距/填充等以使其更紧凑。这是简单的画图来显示我需要的东西： Example view

这里是描述：

• 导航栏必须是全宽，边距与仪表板上的相同，
• 在导航栏下我需要查看名称，
• 图块的尺寸必须相同，
• 图块之间的间距必须相同（例如 a、b 值）- 水平和垂直边距必须相同 a=b

我不知道如何正确设置并且找不到解决方案。 感谢您的帮助;)

Answer 1

如果要创建工具栏，请使用 mat-toolbar，然后添加文本

如果要创建一个网格，其中a=b，然后定义gutterSize，就等价了

在组件.html中

<mat-toolbar>Dashboard</mat-toolbar>
<mat-grid-list cols="3" rowHeight="100px" [gutterSize]="5">
  <mat-grid-tile
    *ngFor="let tile of tiles"
    [colspan]="tile.colSpace"
    [rowspan]="tile.rowSpace"
    [style.background]="tile.color">
    {{tile.text}}
  </mat-grid-tile>
</mat-grid-list>

您需要创建一个磁贴列表，并定义每个磁贴将占用的行数和列数

在component.ts中

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

或者，您也可以指定，您总是期望 6 列，并且您希望 x 占用三分之一的库仑数，到 6/3 = 2 => colspan = 2，并且您希望 y 是 x 的一半, 行跨度 = 1

<mat-toolbar>Dashboard</mat-toolbar>
<mat-grid-list cols="6" rowHeight="100px" [gutterSize]="5">
  <mat-grid-tile
    *ngFor="let tile of tiles"
    [colspan]="2"
    [rowspan]="1"
    [style.background]="tile.color">
    {{tile.text}}
  </mat-grid-tile>
</mat-grid-list>

您还可以选择声明所有相同的颜色，或指定每个不同的颜色。