So erstellen Sie ein eckiges Mat-Grid-List-Material
P粉473363527
P粉473363527 2023-08-18 12:56:40
0
2
481
<p>Ich versuche, eine Mat-Grid-Liste mit Angular Material zu erstellen. Das Problem ist, dass auf der Seite nichts angezeigt wird</p> <p>Dies ist mein Komponenten-Infobereich:</p> <pre class="brush:php;toolbar:false;"><div class="mat-grid-list" "div class="mat-grid-tile" Drei </div> "div class="mat-grid-tile" Zwei </div> <div class="mat-grid-tile" style="grid-column: span 3; Vier </div> </div></pre> <p>Alles ist installiert und deklariert</p>
P粉473363527
P粉473363527

Antworte allen(2)
P粉262113569

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

P粉903969231

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

<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>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage