Início / coding / Perguntas / 76921562
Accepted
547n00n
Asked: 2023-08-17 20:31:50 +0800 CST

Como criar material angular mat-grid-list

  • 772

Estou tentando criar um mat-grid-list com material angular, o problema é que não vejo nada aparecer na minha página

esta é a seção de informações do meu componente:

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

tudo é instalado e declarado

html

2 respostas

  1. Best Answer

    As propriedades grid-column e grid-row precisam de valores de extensão apropriados para determinar quantas colunas ou linhas um bloco de grade deve abranger.

    <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. Você precisa usar os componentes da lista de grade Angular Material. Não apenas o CSS Veja exemplos https://material.angular.io/components/grid-list/examples

    • 0

relate perguntas