Css 单击时如何更改角度材料侧导航汉堡菜单?
我正在创建一个angular 7应用程序,并使用angular material side nav bar。当我单击side nav Display和side nav close时,我想将汉堡菜单更改为交叉图标,然后交叉图标更改为汉堡菜单图标Css 单击时如何更改角度材料侧导航汉堡菜单?,css,typescript,angular-material,Css,Typescript,Angular Material,我正在创建一个angular 7应用程序,并使用angular material side nav bar。当我单击side nav Display和side nav close时,我想将汉堡菜单更改为交叉图标,然后交叉图标更改为汉堡菜单图标 //html code <mat-sidenav-container class="sidenav-container"> <mat-sidenav #drawer class="sidenav" fixedInViewport="tru
//html code
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav" fixedInViewport="true"
[attr.role]="'dialog'"
[mode]="'over'"
[opened]="!(isHandset$ | async)">
<mat-toolbar>Menu</mat-toolbar>
<mat-nav-list>
<a mat-list-item href="#">Link 1</a>
<a mat-list-item href="#">Link 2</a>
<a mat-list-item href="#">Link 3</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="true">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span>web-doctor</span>
</mat-toolbar>
<div style="height: 500px">abc</div>
<ng-content>
</ng-content>
</mat-sidenav-content>
</mat-sidenav-container>
您可以使用
ngIf
进行此操作
<mat-toolbar color="primary">
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
*ngIf="true">
<mat-icon aria-label="Side nav toggle icon" *ngIf="!drawer.opened; else showCross">
menu
</mat-icon>
<ng-template #showCross>
<mat-icon aria-label="Side nav toggle icon">close</mat-icon>
</ng-template>
</button>
<span>web-doctor</span>
</mat-toolbar>
菜单
关闭
网络医生
您可以使用ngIf
进行此操作
<mat-toolbar color="primary">
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
*ngIf="true">
<mat-icon aria-label="Side nav toggle icon" *ngIf="!drawer.opened; else showCross">
menu
</mat-icon>
<ng-template #showCross>
<mat-icon aria-label="Side nav toggle icon">close</mat-icon>
</ng-template>
</button>
<span>web-doctor</span>
</mat-toolbar>
菜单
关闭
网络医生
只是一个建议!不要一开始就使用UI。首先考虑一下你的想法。只要简单地实现你的想法,否则这些小问题会白白浪费你的时间。只是一个建议!不要一开始就使用UI。首先考虑一下你的想法。只要简单地实现你的想法,否则这些小问题会白白浪费你的时间。