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

Question

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

这里是描述:

• 导航栏必须全宽，边距与仪表板相同，
• 在导航栏下我需要查看名称，
• 图 block 必须具有相同的尺寸，
• 图 block 之间的间距必须相同(示例中的 a、b 值)- 水平和垂直边距必须相同 a=b

我不知道如何正确设置它，也找不到解决方案。 感谢您的帮助；)

Answer 1

如果你想创建一个工具栏，使用mat-toolbar，并且只添加文本

如果你想创建一个网格，其中a=b，然后定义gutterSize，它是等价的

在 component.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>

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

在 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>

您还可以选择声明所有相同的颜色，或者为每一种分配不同的颜色。