Angulaire 2 2 Sidenav effondrement de la Barre d'outils de Navigation Tiroir

J'ai un sidenav et imbriquée de la barre d'outils
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 la sidenav jusqu'à l'icône de la maison comme la Navigation Tiroir

près sidenav
Angulaire 2 2 Sidenav effondrement de la Barre d'outils de Navigation Tiroir

ouvrir sidenav
Angulaire 2 2 Sidenav effondrement de la Barre d'outils de Navigation Tiroir

Pourriez-vous définir min-width sur sidnav?
pas de travail. Je ne peux pas changer ce <div cdk-défilement="" class="mat-sidenav-contenu" ng-réfléchir-ng-style="[object object]" style="margin-left: 320px; margin-right: 0px; transform: translate3d(0px, 0px, 0px);">
Vous pouvez toujours définir ouvert="true" alors que le tiroir est toujours indiqué. Ensuite, mettre le texte dans une durée et dans ce laps ajouter un *ngif qui obtient activé en appuyant sur le bouton cliquez sur

OriginalL'auteur Pako | 2017-07-30

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

Basé sur la event drapeau, j'ai ajouté quelques ngStyle qui permettra de maintenir la largeur de sidenav. Notez que, le sidenav est toujours ouverte maintenant [ajouter une propriété opened="true"], car il est toujours visible. J'ai aussi fini à l'aide de l'émise drapeau de la barre d'outils à utiliser pour "Sidenav' titre. Vous pouvez le supprimer si vous avez besoin de montrer la partielle "Sid".

Aussi, depuis le sidenav est toujours ouvert, j'ai ajouté css personnalisé pour animer le changement de largeur.

Plunker démo

de la barre d'outils.composante.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.composante.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.composante.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;
}

Espère que cela vous aide 🙂

OriginalL'auteur Nehal

7

Ceci peut être réalisé à l'aide d'un simple css hack.
Nous pouvons appeler les méthodes de l'augmentation (la) et diminution() qui modifie la largeur de sidenav basé sur un événement comme mouseenter et mouseleave ou dans votre cas onClick de "de la barre d'outils du menu du bouton"
```
<md-sidenav #sidenav mode="side" class="example-sidenav" [ngStyle]="{ 'width.em': sidenavWidth }" opened="true" (mouseover)="increase()"   (mouseleave)="decrease()">
```
Ce sera incerese la largeur de sidenav quand on le point sur sidenav et de diminuer la largeur de nous pointer le pointeur de la souris à un autre endroit.
```
  increase(){
    this.sidenavWidth = 15;
  }
  decrease(){
    this.sidenavWidth = 4;
  }
```
Jetez un oeil à 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 cela aide 🙂

OriginalL'auteur Ravi Rajpurohit

Vous devez vous connecter pour publier un commentaire.