web-dev-qa-db-fra.com

Angular 2 Material 2 Sidenav Toolbar collapse like Navigation Drawer

J'ai un sidenav et une barre d'outils imbriquée
toolbar.html 

<md-sidenav-container fullscreen>
    <md-sidenav #sidenav mode="side" color="primary">
     <md-toolbar color="primary"><span>Sidenav</span></md-toolbar>
        <button md-button class="sidenav-link" (click)="sidenav.close()">
          <md-icon>home</md-icon><span class="title"> HOME</span>
          </button>
          <button md-button class="sidenav-link" (click)="sidenav.close()">
            <md-icon>home</md-icon><span class="title"> HOME</span>
          </button>
      </md-sidenav>
      <app-toolbar [sidenav]="sidenav"></app-toolbar>
</md-sidenav-container>

sidenav.html 

<md-toolbar color="primary">
  <button md-button class="toolbar-menu-button"
          (click)="sidenav.toggle(); isCollapsed = !isCollapsed">
    <md-icon [@iconChange]="isCollapsed">menu</md-icon>
  </button>
  <span class="toolbar-spacer"></span>
  <button md-button class="toolbar-link" >DASHBOARD</button>
  <span class="toolbar-spacer"></span>
</md-toolbar>

https://plnkr.co/edit/up19ZNJyMt6uatqdI9uv?p=preview

Je voudrais fermer le sidenav jusqu'à l'icône d'accueil comme le tiroir de navigation

fermer le sidenav sidenav close

ouvrir sidenav sidenav open

angularnavigation-drawertransitionangular-material2
7
Pako

Ce problème est peu inhabituel. Comme le bouton de la barre d'outils contrôle l'état d'ouverture et de fermeture, j'ai dû ajouter un EventListener pour passer l'état de sidenav chaque fois que le bouton est cliqué.

Basé sur le drapeau event, j'ai ajouté un ngStyle qui maintiendra la largeur de sidenav. Notez que le sidenav est toujours ouvert maintenant [ajouter la propriété opened="true"], car il est toujours visible. J'ai également fini par utiliser le drapeau émis de la barre d'outils pour le titre de "Sidenav". Vous pouvez le supprimer si vous devez montrer le "Sid" partiel.

De plus, comme le sidenav est toujours ouvert, j'ai ajouté des CSS personnalisés pour animer le changement de largeur.

Démo Plunker

toolbar.component.ts:

export class ToolbarComponent implements OnInit {

  shortnav = true;

  @Input() sidenav;

  @Output()
  change: EventEmitter<booelan> = new EventEmitter<boolean>();

  constructor() { 
    console.log(this.sidenav);
  }

  ngOnInit() {
  }

  toggle(){
    this.shortnav = !this.shortnav;
    console.log("shortnav: " + this.shortnav)
    this.change.emit(this.shortnav);
  }

}

toolbar.component.html:

<button md-button class="toolbar-menu-button"
          (click)="toggle(); isCollapsed = !isCollapsed">

sidenav.component.ts:

export class SidenavOverviewExample {

  showSidenavTitle = false;
  sidenavWidth = 2.75;

  changeWidth(showShortNav){
    if(showShortNav){
      this.sidenavWidth = 2.5;
      this.showSidenavTitle = false;
    }
    else{
      this.sidenavWidth = 13;
      this.showSidenavTitle = true;
    }
  }
}

sidenav.component.html:

<md-sidenav-container fullscreen>
    <md-sidenav #sidenav mode="side"   
                color="primary" 
                opened="true"
                [ngStyle]="{ 'width.em': sidenavWidth }"
                class="animate-sidenav">
     <md-toolbar color="primary">
       <span *ngIf="showSidenavTitle">Sidenav</span>
     </md-toolbar>
        <button md-button class="sidenav-link" (click)="sidenav.close()">
          <md-icon>home</md-icon><span class="title"> HOME</span>
          </button>
          <button md-button class="sidenav-link" (click)="sidenav.close()">
            <md-icon>home</md-icon><span class="title"> HOME</span>
          </button>
      </md-sidenav>

      <app-toolbar [sidenav]="sidenav" (change)="changeWidth($event)"></app-toolbar>

 </md-sidenav-container>

sidenav.component.css:

.mat-sidenav-transition .mat-sidenav{
  /* custom animation to grow and shrink width */
  -webkit-transition: width .3s !important; /* For Safari 3.1 to 6.0 */
  transition: width .3s !important;
}

J'espère que cela vous aide :)

4
Nehal

enter image description here

Cela peut être réalisé en utilisant un simple hack CSS. Nous pouvons appeler les méthodes augmenter () et diminuer () qui modifie la largeur de sidenav en fonction d'un événement comme mouseenter et mouseleave ou dans votre cas onClick of "toolbar-menu-button" 

<md-sidenav #sidenav mode="side" class="example-sidenav" [ngStyle]="{ 'width.em': sidenavWidth }" opened="true" (mouseover)="increase()"   (mouseleave)="decrease()">

Cela augmentera la largeur de sidenav lorsque nous pointerons sur sidenav et diminuera la largeur lorsque nous pointerons le pointeur de la souris à un autre endroit.

  increase(){
    this.sidenavWidth = 15;
  }
  decrease(){
    this.sidenavWidth = 4;
  }

Jetez un œil à cette démo: - https://mini-sidenav.firebaseapp.com/

et le dépôt github: - https://github.com/Ravi-Rajpurohit/mini-md-sidenav

J'espère que ça aide :-)

7
Ravi Rajpurohit