Materiale angolare 7 - Elenco griglia

Il <mat-grid-list>, una direttiva angolare, viene utilizzata per creare una vista bidimensionale che dispone le celle in un layout basato su griglia.

In questo capitolo, mostreremo la configurazione richiesta per disegnare un controllo elenco griglia utilizzando Materiale angolare.

Crea applicazione angolare

Segui i seguenti passaggi per aggiornare l'applicazione Angular che abbiamo creato in Angular 6 - Capitolo Configurazione del progetto -

Passo Descrizione
1 Creare un progetto con un nome materialApp come spiegato nel capitolo Angular 6 - Project Setup .
2 Modifica app.module.ts , app.component.ts , app.component.css e app.component.html come spiegato di seguito. Mantieni il resto dei file invariato.
3 Compilare ed eseguire l'applicazione per verificare il risultato della logica implementata.

Di seguito è riportato il contenuto del descrittore del modulo modificato 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 { }

Di seguito è riportato il contenuto del file CSS modificato app.component.css.

mat-grid-tile {
   background: lightblue;
}

Di seguito è riportato il contenuto del file host HTML modificato 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>

Risultato

Verifica il risultato.

Dettagli

  • Per prima cosa, abbiamo creato l'elenco della griglia utilizzando mat-grid-list.
  • Quindi, abbiamo aggiunto contenuti utilizzando mat-grid-tile.