如何將“mat-toolbar”放在“mat-sidenav”Angular Material 5 的頂部

Question

我寫在這里是因為我有一個關於 Angular Material 的 Mat Toolbar 和 Mat-sidenav 的問題。 我試圖讓 Sidenav 進入工具欄下方，並且工具欄始終占據頂部，如下所示：

例子

這是我的代碼：

 <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>

我正在使用 Angular 和 Angular Material 的 5.6.0 版本。 我嘗試使用 CSS 並更改代碼結構的順序，但最后一個只是給了我錯誤和更多錯誤； 阻止應用程序運行。

Answer 1

您放入mat-sidenav-content任何內容都會出現在菜單旁邊。 sidenav 菜單和內容上方工具欄的基本布局結構是：

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

這是StackBlitz上的一個示例。

Answer 2

對我來說，只需像 G. Tranter 一樣更改 html 並將 mat- fixedInViewport中的 fixedInViewport 從true設置為false

Answer 3

一個非常簡單的方法是在 mat-toolbar 中將 z-index 添加到 10。 這是為此的CSS。

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

<mat-toolbar class="mat-toolbar-example"></mat-toolbar>

Answer 4

.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;
}

Answer 5

如果您在項目中使用 Angular 6，您可以通過 cli 運行以下命令輕松地為 Mat-toolbar 和 Mat-sidenav 生成樣板：

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

使 sidenav 組件可見后，您應該會看到以下結果

Mat Sidenav 組件

Answer 6

您的模式在 html 中必須是這樣的：

<mat-toolbar color="primary">
   ...
</mat-toolbar>

<mat-sidenav-container>
  <mat-sidenav>
     ...
  </mat-sidenav>
  <mat-sidenav-content>
     ...
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

然后用你的 CSS 來設置它的樣式，如下所示：

.mat-toolbar {
  position: sticky;
  top: 0;
  z-index: 99;
}

確保您的 z-index 是關於您在其下滾動的其他內容。