web-dev-qa-db-fra.com

Angular Barre latérale matérielle avec mode "Demi" côté

Je travaille sur la barre latérale dynamique pour notre projet, essentiellement ce que nous voulons faire est de mettre en place une barre latérale dynamique lorsque l'utilisateur clique sur la barre latérale, elle se propage lorsque l'utilisateur clique sur la barre latérale arrière doit s'effondrer et afficher uniquement des icônes (mais pas effondrement total, il conservera les icônes), par exemple avant que l'utilisateur ne clique sur l'icône. Nous utilisons sidenav.toggle () de angular qui ferme fondamentalement la barre latérale et si je n'utilise pas la fonction toggle (), le mode "Side" pour navbar ne fonctionne pas. vous voulez réduire l'icône en mode latéral. (L'autre raison pour laquelle nous devons conserver le mode latéral est que nous devons également nous assurer que lorsque l'utilisateur déploie la barre latérale, le contenu du côté droit doit pousser vers la droite).

enter image description here

Après que l'utilisateur a cliqué sur l'icône enter image description here

Y-a-t-il un moyen de faire ça?

Merci.

cssangularangular-materialsidebardynamic-sizing
7
Zeqing Zhang

Option 1: Génération automatique:

Vous pouvez créer un composant de navigation à partir de modèles fournis par Material lui-même en utilisant 'Schémas de composants CLI angulaires'

ng generate @angular/material:nav your-component-name

La commande ci-dessus va générer un nouveau composant qui comprend une barre d'outils avec le nom de l'application et une navigation latérale réactive basée sur les points d'arrêt des matériaux. En savoir plus sur angular des matériaux ici

Option 2: mise en œuvre manuelle:

Pour l'implémenter, il vous suffit de vous référer à ces deux liens:

parcourir le code suivant. La mise en œuvre sera quelque chose comme ceci:

<mat-drawer-container class="example-container mat-typography" autosize>
  <mat-drawer #drawer mode="side" disableClose="true" opened="true">
    <button mat-mini-fab (click)="isExpanded = !isExpanded" color="warn" style="margin: 10px;">
      <mat-icon aria-label="Menu">menu</mat-icon>
    </button>

    <mat-nav-list>
      <mat-list-item>
        <mat-icon mat-list-icon>person</mat-icon>
        <h4 mat-line *ngIf="isExpanded">Management A</h4>
      </mat-list-item>
      <mat-list-item>
        <mat-icon mat-list-icon>assignment</mat-icon>
        <h4 mat-line *ngIf="isExpanded">Management B</h4>
      </mat-list-item>
      <mat-list-item>
        <mat-icon mat-list-icon>domain</mat-icon>
        <h4 mat-line *ngIf="isExpanded">Management C</h4>
      </mat-list-item>
      <mat-list-item>
        <mat-icon mat-list-icon>folder_shared</mat-icon>
        <h4 mat-line *ngIf="isExpanded">Management X</h4>
      </mat-list-item>
    </mat-nav-list>
  </mat-drawer>

  <div class="example-sidenav-content">
    You cards and screen Contents goes here..
    Will be pushed towards right on expanding side navbar.
  </div>
</mat-drawer-container>

Side Navigation CollapsedSide Navigation Expanded

16
shaheer shukur

Je l'ai fait avec un peu de CSS

    mat-sidenav:not(.mat-drawer-opened) {
    transform: translate3d(0, 0, 0) !important;
    visibility: visible !important;
    width: 60px !important;
    overflow: hidden;
  }

Ainsi, lorsque le tirage n'est PAS ouvert, la largeur du sidenav est de 60 pixels et non de 0. Juste assez pour afficher vos icônes.

OK, le problème suivant est que vous devrez masquer un tas de choses comme le nom du bouton et d'autres choses descriptives, pour moi, je dois changer la hauteur de l'image de profil et masquer du texte supplémentaire. J'ai fait cela de la même manière que ci-dessus en utilisant le sélecteur: not:

  mat-sidenav:not(.mat-drawer-opened) div.leftNav div.navProfile img {
    width: 40px; margin: 16px 0 0px 0;
  }
  mat-sidenav:not(.mat-drawer-opened) .navTitle,
  mat-sidenav:not(.mat-drawer-opened) .profileTitle {
    display: none;
  }

Une fois réduit, je ne voulais pas afficher les noms des boutons, j'ai donc enveloppé le nom dans un * ngIf

 <span class="navName" *ngIf="opened">{{ page?.name }} </span>

Cela devrait fonctionner, et cela fonctionne, mais il y a un problème. Le ngIf est lié à l'événement ouvert et vous remarquerez un délai lorsque l'événement se déclenche (pour en tenir compte) pour afficher vos étiquettes lorsque le tiroir est ouvert.

Pour résoudre ce problème, j'ai dû me plonger dans l'API de sidenav et j'ai trouvé un appel de l'émetteur d'événements openStart et closedStart. J'ai créé un nouveau bool dans la classe de composants,

showNavLabels: boolean;

puis lié les événements à ce booléen dans le HTML.

  <mat-sidenav class="sidenav" #sidenav mode="side" [(opened)]="opened"
      (openedStart)='showNavLabels = !showNavLabels'
      (closedStart)='showNavLabels = !showNavLabels' >

Je suis sûr qu'il existe une meilleure façon car je ne suis pas encore expérimenté avec Angular encore.

J'espère que ça vous aide.

0
Darren Street