主页 / coding / 问题 / 76921562
Accepted
547n00n
Asked: 2023-08-17 20:31:50 +0800 CST

如何创建 mat-grid-list 角度材质

  • 772

我正在尝试使用有角度的材料创建一个 mat-grid-list ，问题是我没有看到任何内容出现在我的页面中

这是我的组件信息部分：

<div class="mat-grid-list" cols="4" rowHeight="100px">
  <div class="mat-grid-tile" style="grid-column: span 1; grid-row: span 2; background-color: lightpink;">
    Three
  </div>

  <div class="mat-grid-tile" style="grid-column: span 0; grid-row: span 0; background-color: lightgreen;">
    Two
  </div>

  <div class="mat-grid-tile" style="grid-column: span 3; grid-row: span 1; background-color: #DDBDF1;">
    Four
  </div>
</div>

所有东西都已安装并声明

html

2 个回答

  1. Best Answer

    grid-column 和 grid-row 属性需要适当的跨度值来确定网格图块应跨越多少列或行。

    <mat-grid-list cols="4" rowHeight="100px">
  <mat-grid-tile colspan="1" rowspan="2" style="background-color: lightpink;">
    Three
  </mat-grid-tile>

  <mat-grid-tile colspan="1" rowspan="2" style="background-color: lightgreen;">
    Two
  </mat-grid-tile>

  <mat-grid-tile colspan="3" rowspan="1" style="background-color: #DDBDF1;">
    Four
  </mat-grid-tile>
</mat-grid-list>
    • 1

  2. 您需要使用 Angular Material 网格列表组件。不仅仅是 CSS 请参阅示例https://material.angular.io/components/grid-list/examples

    • 0

相关问题