Comment créer un matériau angulaire mat-grid-list
P粉473363527
2023-08-18 12:56:40
<p>J'essaie de créer une liste de grilles de tapis en utilisant Angular Material, le problème est que je ne vois rien apparaître sur la page</p>
<p>Voici la section d'informations sur mes composants :</p>
<pre class="brush:php;toolbar:false;"><div class="mat-grid-list" cols="4" rowHeight="100px">
<div class="mat-grid-tile" style="grille-colonne : travée 1 ; ligne-grille : travée 2 ; couleur d'arrière-plan : rose clair ; »>
Trois
</div>
<div class="mat-grid-tile" style="grid-column: span 0;
Deux
</div>
<div class="mat-grid-tile" style="grille-colonne : travée 3 ; travée 1 ;
Quatre
</div>
</div></pre>
<p>Tout est installé et déclaré</p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous devez utiliser le composant Grid List d'Angular Material. Pas seulement CSS. Veuillez vous référer aux exempleshttps://material.angular.io/components/grid-list/examples
Les propriétés de colonne de grille et de ligne de grille nécessitent des valeurs d'étendue appropriées pour déterminer le nombre de colonnes ou de lignes qu'un bloc de grille doit couvrir.
<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>