我正在开发一个使用 Material UI 的 Angular 应用程序,我使用 Angular CLI 生成以下代码:
Navigation HTML
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav" fixedInViewport [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="(isHandset$ | async) === false">
<mat-toolbar>
<mat-icon>keyboard_arrow_down</mat-icon> Select
</mat-toolbar>
<mat-nav-list>
<a mat-list-item [routerLink]="['home']">
<mat-icon>location_on</mat-icon> - Home
</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
<button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()"
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
</mat-toolbar>
<!-- Add Content Here -->
<ng-content></ng-content>
</mat-sidenav-content>
</mat-sidenav-container>
Run Code Online (Sandbox Code Playgroud)
Navigation TypeScript
import …Run Code Online (Sandbox Code Playgroud)