Application mobile: Créez un menu latéral réactif avec Angular Material » Zoaib Khan

Les menus de navigation de la barre latérale sont le modèle de mise en page le plus couramment utilisé par les applications Web de nos jours. Mais la plupart des composants que nous avons ne sont pas vraiment réactifs. Dans cet article, je vais vous expliquer comment créer un menu de navigation dans la barre latérale vraiment réactif dans Angular à l’aide de la bibliothèque de matériaux angulaires.

Plus précisément, ce que j’entends par une barre latérale réactive est le suivant.

Sur les ordinateurs de bureau ou sur des écrans plus grands, nous avons suffisamment d’espace, nous aimerions donc que la barre latérale reste visible à tout moment, rappelant à l’utilisateur les différentes sections du site. Sur des écrans plus petits, nous aimerions masquer la barre latérale et l’afficher uniquement lorsque l’utilisateur souhaite accéder à une autre section. Voici le résultat final de notre tutoriel montrant ce comportement.

Assez propre et intuitif, non ? Commençons à voir exactement comment faire cela!

Didacticiel vidéo

Découvrez le didacticiel vidéo ci-dessous. Ou si vous êtes plutôt un lecteur, continuez avec la version texte ! ??

Mise en place de notre projet

Commençons par configurer notre projet Angular en exécutant les commandes suivantes sur notre terminal (avec la CLI Angular).

ng new angular-responsive-sidebar
ng add @angular/material

Ces commandes créent une application Angular et y ajoutent la bibliothèque de composants Angular Material. Importons maintenant les modules dont nous avons besoin dans notre app.module.ts déposer.

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatSidenavModule,
    MatButtonModule,
    MatIconModule,
    MatDividerModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Génial, nous pouvons maintenant passer à l’ajout de nos composants dans le modèle !

Ajout de nos composants de barre d’outils et de barre latérale

Ajoutons la barre d’outils des matériaux et la barre de navigation latérale des matériaux à notre app.component.html déposer.



Responsive side navigation



    
    
    
        
Main content here!

Comme vous pouvez le voir, le composant de navigation côté matériau comporte certaines parties. Le conteneur est en fait appelé le mat-sidenav-conteneur. Cela a le tapis-sidenav et le mat-sidenav-contenu sections à l’intérieur de celui-ci.

tapis-sidenav est votre menu latéral pendant que mat-sidenav-contenu est le contenu principal de votre application. Vous pouvez conserver n’importe quel contenu ici, y compris une prise de routeur. Vous utiliserez très probablement des itinéraires pour afficher différentes sections du site ici. Dans notre cas, j’ai juste gardé du texte pour montrer que c’est le contenu principal.

Voyons maintenant comment nous avons ajouté des styles pour pimenter la mise en page !

Styliser notre mise en page pour donner un look élevé

Voici comment notre app.component.scss fichier ressemble pour l’instant.

mat-toolbar {
    background: #004a9f;
    color: white;
}

mat-sidenav {
    margin: 16px;
    width: 200px;
    border-right: none;
    background: #002b5c;
    color: white;
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}

.content {
    height: calc(100vh - 98px);
    border-radius: 10px;
    margin: 16px;
    margin-left: 32px;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 2rem;
    color: lightgray;
}

mat-sidenav-container {
    height: calc(100vh - 65px);
}

Ce que nous avons fait ici, c’est ajouter des couleurs d’arrière-plan et de premier plan pour configurer notre conception. Ensuite, nous avons ajouté des marges pour que les sections apparaissent avec un certain espacement entre elles. Les hauteurs fixes sont là pour que les sections apparaissent complètement sur la page (tout défilement se fera à l’intérieur d’elles).

Enfin, nous avons ajouté quelques ajustements tels qu’une bordure arrondie et une élévation à l’aide du tapis-élévation-z8 classe qui vient avec le matériel.


...



   
Main content here!

En conséquence, notre mise en page de base est configurée comme ci-dessous.

Application mobile: Créez un menu latéral réactif avec Angular Material » Zoaib Khan

Super! Ajoutons maintenant quelques éléments de menu et un style à notre menu de navigation de la barre latérale.

Styliser notre barre latérale et ajouter les éléments de menu

Ce n’est strictement pas nécessaire pour cette application, mais je voulais faire un exemple plus complet de barre latérale. Si vous êtes plus intéressé par les fonctionnalités de la barre latérale réactive dans Angular, veuillez passer à la section suivante !

Ok, ajoutons maintenant quelques éléments de menu, c’est-à-dire des boutons, à la barre latérale.


        
        
        

        

        

    

C’est un truc assez standard – certains composants de bouton matériel avec des icônes qui leur sont liées. Dans une vraie application, vous aurez évidemment aussi routerLink sur chacun d’eux en reliant les différents itinéraires de votre application. Voici à quoi cela ressemble (avec un peu de style que je vais montrer dans un peu).

Éléments de menu de la barre latérale réactifs

Pour le rendre plus réel, ajoutons également une section en haut de la barre latérale avec le profil d’un utilisateur.

Application mobile: Créez un menu latéral réactif avec Angular Material » Zoaib Khan

John Smith

Software Engineer

Et les styles associés à ces éléments.

.menu-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 1rem;

    mat-icon {
        margin-right: 8px;
    }
}

.avatar {
    margin-top: 16px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.name {
    margin-top: 8px;
    font-weight: normal;
}

.designation {
    margin-top: 2px;
    font-size: 0.7rem;
    color: lightgrey;
}

mat-divider {
    margin-top: 16px;
    margin-bottom: 16px;
    background-color: rgba(255, 255, 255, 0.5);
}

Pour la plupart, les styles ont les couleurs et l’espacement nécessaires pour chacun des éléments. L’avatar a également un rayon de bordure pour lui donner la forme d’un cercle. Et c’est à peu près tout!

Application mobile: Créez un menu latéral réactif avec Angular Material » Zoaib Khan

Joli. Cela semble beaucoup plus authentique et peut très bien être utilisé dans une vraie application. Maintenant que notre barre latérale a fière allure, passons à la rendre réactive !

Consultez mon article connexe sur la création d’une grille de cartes réactives dans Angular ici.

Rendre la barre latérale réactive

Pour rendre la barre latérale réactive, le composant matériel sidenav nous fournit une propriété appelée mode. Pour les grands écrans, nous voulons que le mode soit côté. Cela signifie que le sidenav restera toujours visible et notre contenu principal affiché avec lui.

L’autre mode est plus de. Nous en aurons besoin lorsque nous voulons que la barre latérale soit masquée normalement, mais qu’elle n’apparaisse sur le contenu que lorsque nous voulons naviguer vers une autre section.

Tout ce dont nous avons besoin, c’est d’un moyen de basculer entre ces modes lorsque la taille de l’écran change. Heureusement, nous pouvons détecter les changements de taille d’écran avec le package de mise en page Angular CDK et ses Observateur de point d’arrêt service. Voyons un peu de code !

export class AppComponent {
  @ViewChild(MatSidenav)
 sidenav!: MatSidenav;

  constructor(private observer: BreakpointObserver) {}

  ngAfterViewInit() {
    this.observer.observe(['(max-width: 800px)']).subscribe((res) => {
      if (res.matches) {
        this.sidenav.mode = 'over';
        this.sidenav.close();
      } else {
        this.sidenav.mode = 'side';
        this.sidenav.open();
      }
    });
  }
}

Il se passe quelques choses ici. Parcourons-les un par un.

Premièrement, nous avons un VoirEnfant décorateur au top pour obtenir le MatSidenav référence de composant dans notre code. Ensuite, nous incluons le Observateur de point d’arrêt service chez notre constructeur.

Nous utilisons le observer méthode de la Observateur de point d’arrêt qui peut prendre n’importe quel nombre de points d’arrêt. Si l’un d’entre eux correspond ou change d’état (c’est-à-dire cesse de correspondre), tous les abonnements à la méthode sont notifiés.

Dans notre cas, nous utilisons 800px comme notre point d’arrêt. Cela signifie que si cela correspond, nous devons passer au plus de mode pour notre barre latérale et fermez-la. Et vice versa, si cela ne correspond pas.

N’oubliez pas de conserver l’abonnement dans la méthode de cycle de vie ngAfterViewInit, afin que nous soyons assurés que le sidenav est initialisé avant de l’appeler !

Super! Désormais, si vous réduisez et augmentez la largeur de votre écran à l’aide des outils de développement, vous pourrez voir la barre latérale apparaître et disparaître comme nous le souhaitons.

Ajout du bouton de basculement du menu de la barre latérale pour les petits écrans

Mais attendez, alors que le menu de navigation de la barre latérale se cache sur des écrans plus petits, nous n’avons aucun moyen pour qu’il s’affiche lorsque nous en avons besoin. Nous avons besoin d’un bouton de basculement de menu permettant d’ouvrir et de fermer le menu sur des écrans plus petits ! Ajoutons cela maintenant.


    
    Responsive side navigation



...

La première chose que vous devez noter est tout en bas. Nous avons ajouté une variable de modèle pour le composant sidenav en utilisant le #sidenav="matSidenav" syntaxe. Cela fait essentiellement la même chose que nous avons fait avec le décorateur ViewChild auparavant, mais cela rend la référence disponible dans le modèle.

Pour le bouton bascule, nous utilisons un bouton d’icône de matériau. Nous avons ajouté un *ngSi directive pour qu’elle ne s’affiche que lorsque le sidenav a le plus de mode, qui se produira sur des écrans plus petits. L’événement click du bouton appelle simplement la fonction bascule du composant sidenav.

Enfin, nous ajoutons quelques *ngSi directives pour vérifier si le sidenav est ouvert ou non et afficher une icône différente afin qu’il soit visuellement clair pour l’utilisateur.

Et c’est tout! Voici à nouveau notre produit fini. Une barre latérale réactive propre et intuitive en Angular pour vous 🔥

Conclusion

Avec la prolifération des tablettes et des mobiles de nos jours, il est évident que votre application Web doit être réactive dans sa mise en page. Cet article propose un moyen de créer une barre latérale réactive dans Angular avec des composants matériels et le package CDK.

Si nous y réfléchissons, cela peut être combiné avec d’autres composants pour les rendre également réactifs sans trop d’effort – fournissant une interface intuitive à vos utilisateurs quelle que soit la plate-forme qu’ils utilisent !

J’espère que vous avez trouvé cela utile d’une manière ou d’une autre. Si c’est le cas, consultez mes autres articles connexes ci-dessous et/ou suivez-moi sur Twitter pour des mises à jour sur les futurs articles !

Le code complet de ce didacticiel est disponible sur ce référentiel github.

Merci d’avoir lu! Au revoir

Si cela vous a plu, suivez-moi sur twitter pour en savoir plus !

#Créez #menu #latéral #réactif #avec #Angular #Material #Zoaib #Khan