web-dev-qa-db-fra.com

Comment placer "mat-toolbar" sur "mat-sidenav" Angular Material 5

J'écris ici car j'ai une question sur Mat Toolbar et Mat-sidenav de Angular Material. J'essaie de faire passer le Sidenav sous la barre d'outils et la barre d'outils occupe toujours le haut partie, quelque chose comme ça:

Exemple

Voici mon code:

<mat-sidenav-container class="sidenav-container" autosize>
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'side' : 'Push'"
      [opened]="(isHandset$ | async)">
      <mat-toolbar class="fixed-header">
        <img class="logooTest" src="data:image/gif;base64,test"/>
      </mat-toolbar>
                <mat-nav-list>
                          <mat-list-item>
                                <a routerLink="/dashboard">Test</a>
        <mat-icon mat-list-icon>home</mat-icon>
        </mat-list-item>
        <mat-list-item>
          <a routerLink="/dashboard">Test</a>
          <mat-icon mat-list-icon>home</mat-icon>
          </mat-list-item>
          <mat-list-item>
          <a routerLink="/test">Test</a>
          <mat-icon mat-list-icon>tune</mat-icon>
          </mat-list-item>
            <mat-list-item>
            <a routerLink="/#">Test</a>
            <mat-icon mat-list-icon>settings</mat-icon>
            </mat-list-item>
            <mat-list-item>
            <a routerLink="/#">Test</a>
            <mat-icon mat-list-icon>layers</mat-icon>
            </mat-list-item>
            <mat-list-item (click)="showSubmenu = !showSubmenu" class="parent">
              <span class="full-width" *ngIf="isExpanded || isShowing">Test dropdown</span>
              <mat-icon mat-list-icon>flash_on</mat-icon>
              <mat-icon class="menu-button" [ngClass]="{'rotated' : showSubmenu}" *ngIf="isExpanded || isShowing">expand_more</mat-icon>
            </mat-list-item>
                        <div class="submenu" [ngClass]="{'expanded' : showSubmenu}" *ngIf="isShowing || isExpanded">
          <mat-list-item>
              <a routerLink="/#">Test</a>
              </mat-list-item>
              <mat-list-item>
                <a routerLink="/#">Test</a>
                </mat-list-item>
        <h2 matSubheader><mat-icon>account_balance</mat-icon>  Test</h2>
                                <mat-list-item (click)="showSubSubMenu = !showSubSubMenu" class="parent">
                                        <span class="full-width" *ngIf="isExpanded || isShowing">Test</span>
                                        <mat-icon class="menu-button" [ngClass]="{'rotated' : showSubSubMenu}" *ngIf="isExpanded || isShowing">expand_more</mat-icon>
                                </mat-list-item>
                                <div class="submenu" [ngClass]="{'expanded' : showSubSubMenu}" *ngIf="isShowing || isExpanded">
          <mat-list-item>
            <a routerLink="/test">Test</a>
            </mat-list-item>
            <mat-list-item>
              <a routerLink="/#">Test</a>
              </mat-list-item>
            <h2 matSubheader><mat-icon>card_travel</mat-icon> Test</h2>
            <mat-list-item>
              <a routerLink="/#">Test</a>
              </mat-list-item>
              <mat-list-item>
                <a routerLink="/#">Test</a>
                </mat-list-item>
        </div>

                        </div>
                </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary" class="mat-elevation-z5">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
       <span class="spacer"></span>
       <div class="navigation">
        <a class="button" href="">
          <mat-icon class="logoutIcon">exit_to_app</mat-icon>
        <div class="logout"><span class="aligned-with-icon">Salir</span></div>
        </a>

      </div>
    </mat-toolbar>

  </mat-sidenav-content>
</mat-sidenav-container>

J'utilise la version 5.6.0 de Angular and Angular Material. J'ai essayé d'utiliser CSS et aussi de changer l'ordre de la structure du code, mais ce dernier m'a simplement donné des erreurs et plus d'erreurs, empêchant l'application de s'exécuter.

angularangular-materialangular5angular-material2angular-material-5
4
S. A

Tout ce que vous mettez à l'intérieur mat-sidenav-content apparaît à côté du menu. La structure de mise en page de base de la barre d'outils ci-dessus menu et contenu sidenav est:

<mat-toolbar>...</mat-toolbar>
<mat-sidenav-container>...</mat-sidenav-container>

Voici un exemple sur StackBlitz .

8
G. Tranter

pour moi, changez simplement le html comme G. Tranter et définissez le fixedInViewport dans le mat-sidenav de true à false

2
ananta radityawan

Une façon très simple de le faire est d'ajouter un z-index à 10 dans votre barre d'outils de tapis. Voici le css pour ça.

.mat-toolbar-example{
  position: fixed;
  z-index:10;
}

<mat-toolbar class="mat-toolbar-example"></mat-toolbar>
2
Tejaswi Kasat
.example-mat-toolbar {
    position: sticky;
    position: -webkit-sticky; /* For macOS/iOS Safari */
    top: 0; 
    z-index: 10;
}
.example-sidenav-container {
    position: relative;
    height: 100%;
    display: block;
    transform: inherit;
}
1
sonnet1414

Si vous utilisez Angular 6 pour votre projet, vous pouvez facilement générer un passe-partout pour Mat-toolbar et Mat-sidenav en exécutant la commande suivante via cli:

ng generate @angular/material:materialNav --name myNav

Une fois que vous avez rendu le composant sidenav visible, vous devriez voir le résultat suivant

composant Mat Sidenav

0
Simon Daniel