可以通过以下步骤实现:
<button mat-button [matMenuTriggerFor]="menu" [class.menu-open]="isMenuOpen">Open Menu</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
<button mat-menu-item>Item 3</button>
</mat-menu>
.menu-open {
background-color: #ff0000; /* 设置背景颜色为红色 */
}
import { Component } from '@angular/core';
@Component({
selector: 'app-menu-example',
templateUrl: './menu-example.component.html',
styleUrls: ['./menu-example.component.css']
})
export class MenuExampleComponent {
isMenuOpen = false;
toggleMenu() {
this.isMenuOpen = !this.isMenuOpen;
}
}
<button mat-button [matMenuTriggerFor]="menu" [class.menu-open]="isMenuOpen" (click)="toggleMenu()">Open Menu</button>
这样,当点击按钮时,mat-menu会打开,并且按钮的背景颜色会变为红色。当再次点击按钮时,mat-menu会关闭,并且按钮的背景颜色会恢复默认值。
领取专属 10元无门槛券
手把手带您无忧上云