如何将“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 是关于您在其下滚动的其他内容。