Question

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

以下是描述：

导航栏必须为全宽，边距与“去除”相同，
在导航栏下我需要查看名称，
瓷砖必须具有相同的尺寸，
瓷砖之间的空间必须相同（例如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>

您需要创建一个切片列表，并定义每个切片将采用的行数和列数

在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 =＆gt; colspan = 2，你希望y是x的一半，rowspan = 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>

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

角度材质 - 如何正确设置角度材质特定的仪表板网格？

1 个答案: