Matériau angulaire 7 - SideNav

le <mat-sidenav>, une directive angulaire, est utilisée pour créer une barre de navigation latérale et un panneau de contenu principal avec des fonctionnalités de style et d'animation de conception matérielle.

  • <mat-sidenav-container> - Représente le conteneur principal.

  • <mat-sidenav-content> - Représente le panneau de contenu.

  • <mat-sidenav> - Représente le panneau latéral.

Dans ce chapitre, nous présenterons la configuration requise pour dessiner un contrôle sidenav en utilisant le matériau angulaire.

Créer une application angulaire

Suivez les étapes suivantes pour mettre à jour l'application Angular que nous avons créée dans Angular 6 - Chapitre Configuration du projet -

Étape La description
1 Créez un projet avec un nom materialApp comme expliqué dans le chapitre Angular 6 - Configuration du projet .
2 Modifiez app.module.ts , app.component.ts , app.component.css et app.component.html comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3 Compilez et exécutez l'application pour vérifier le résultat de la logique implémentée.

Voici le contenu du descripteur de module modifié 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 {MatSidenavModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatSidenavModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Voici le contenu du fichier CSS modifié app.component.css.

.tp-container {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background: #eee;
}
.tp-section {
   display: flex;
   align-content: center;
   align-items: center;
   height: 60px;
   width:100px;   
}

Voici le contenu du fichier hôte HTML modifié app.component.html.

<mat-sidenav-container class = "tp-container">
   <mat-sidenav mode = "side" opened>
      <section class = "tp-section">
         <span>File</span>
      </section>
      <section class = "tp-section">
         <span>Edit</span>
      </section>
   </mat-sidenav>
   <mat-sidenav-content>Main content</mat-sidenav-content>
</mat-sidenav-container>

Résultat

Vérifiez le résultat.

Détails

  • Dans un premier temps, nous avons créé un conteneur principal couvrant toute la page.

  • Ensuite, la navigation latérale est créée à l'aide de mat-sidenav et le panneau de contenu à l'aide de mat-sidenav-content.