Sidenav条在材质角度中不能正确渲染。
菜单并排显示,但我需要一个下面的菜单。
app.component.html
<mat-sidenav-container fullscreen>
<mat-sidenav #sidenav mode="push" class="app-sidenav">
<mat-toolbar color="primary">
<span class="toolbar-filler"></span>
<button mat-icon-button (click)="sidenav.toggle()" class="mat-icon-button sidenav-toggle-button" [hidden]="!sidenav.opened">
<mat-icon aria-label="Menu" class="material-icons">close</mat-icon>
</button>
</mat-toolbar>
<mat-nav-list class="mat-nav-list">
<a mat-list-item class="sidenav-link" (click)="sidenav.toggle()">
<mat-icon mat-list-icon>account_balance</mat-icon>
<span class="title" mat-line>comp1</span>
<span mat-line class="secondary">test</span>
</a>
<a mat-list-item class="sidenav-link" (click)="sidenav.toggle()">
<mat-icon mat-list-icon>android</mat-icon>
<span class="title" mat-line>comp2</span>
<span mat-line class="secondary">test</span>
</a>
<a mat-list-item class="sidenav-link" (click)="sidenav.toggle()">
<mat-icon mat-list-icon><i class="material-icons">panorama_wide_angle</i></mat-icon>
<span class="title" mat-line>fullscreen1</span>
<span mat-line class="secondary">fullscreen1</span>
</a>
</mat-nav-list>
</mat-sidenav>
<mat-toolbar id="appToolbar" [ngClass]="{'toolbar-fullscreen': (fullscreen$ | async)}" color="primary">
<button mat-icon-button (click)="sidenav.toggle()" class="mat-icon-button sidenav-toggle-button" [hidden]="sidenav.opened">
<mat-icon aria-label="Menu" class="material-icons">menu</mat-icon>
</button>
<h1 class="component-title">
<a class="title-link">{{title}}</a>
</h1>
<span class="toolbar-filler"></span>
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>
<mat-icon>dialpad</mat-icon>
<span>Redial</span>
</button>
<button mat-menu-item disabled>
<mat-icon>voicemail</mat-icon>
<span>Check voicemail</span>
</button>
<button mat-menu-item>
<mat-icon>notifications_off</mat-icon>
<span>Disable alerts</span>
</button>
</mat-menu>
</mat-toolbar>
</mat-sidenav-container>
截图:
最近angular更新了MD到MAT,这对我的代码有问题吗?因为大多数css不呈现默认设置
发布于 2018-06-09 04:54:34
尝试使用flex layout npm install --save @angular/flex-layout。并将matMenuTriggerFor替换为mat-menu-trigger-for,因为您已经更改了md-> mat。示例代码将如下所示
<mat-sidenav-container fxFlexFill class="example-container">
<mat-sidenav #sidenav fxLayout="column">
<div fxLayout="column">
<a href="#" mat-button>example</a>
<a href="#" mat-button>example</a>
<a href="#" mat-button>example</a>
</div>
</mat-sidenav>
</mat-sidenav-container>
https://stackoverflow.com/questions/46634127
复制相似问题