Material angular 7 - Lista de cuadrículas

los <mat-grid-list>, una directiva angular, se utiliza para crear una vista bidimensional que organiza las celdas en un diseño basado en cuadrículas.

En este capítulo, mostraremos la configuración requerida para dibujar un control de lista de cuadrícula usando Material angular.

Crear aplicación angular

Siga los siguientes pasos para actualizar la aplicación Angular que creamos en Angular 6 - Capítulo Configuración del proyecto -

Paso Descripción
1 Cree un proyecto con un nombre materialApp como se explica en el capítulo Angular 6 - Configuración del proyecto .
2 Modifique app.module.ts , app.component.ts , app.component.css y app.component.html como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3 Compile y ejecute la aplicación para verificar el resultado de la lógica implementada.

A continuación se muestra el contenido del descriptor de módulo modificado app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatGridListModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatGridListModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

A continuación se muestra el contenido del archivo CSS modificado app.component.css.

mat-grid-tile {
   background: lightblue;
}

A continuación se muestra el contenido del archivo de host HTML modificado app.component.html.

<mat-grid-list cols = "4" rowHeight = "100px">
   <mat-grid-tile 
   [colspan] = "3"
   [rowspan] = "1">1
   </mat-grid-tile>
   <mat-grid-tile 
   [colspan] = "1"
   [rowspan] = "2">2
   </mat-grid-tile>
   <mat-grid-tile 
   [colspan] = "1"
   [rowspan] = "1">3
   </mat-grid-tile>
   <mat-grid-tile 
   [colspan] = "2"
   [rowspan] = "1">4
   </mat-grid-tile>
</mat-grid-list>

Resultado

Verifique el resultado.

Detalles

  • Como primero, hemos creado una lista de cuadrículas usando mat-grid-list.
  • Luego, agregamos contenido usando mat-grid-tile.