首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当mat-menu打开时,修改mat-按钮背景颜色

可以通过以下步骤实现:

  1. 首先,在HTML模板中,给mat-menu添加一个打开时的CSS类名,例如"menu-open"。
代码语言:txt
复制
<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>
  1. 在组件的CSS文件中,定义.menu-open类的样式,设置按钮的背景颜色。
代码语言:txt
复制
.menu-open {
  background-color: #ff0000; /* 设置背景颜色为红色 */
}
  1. 在组件的Typescript文件中,添加一个变量来跟踪mat-menu的打开状态,并在打开和关闭时更新该变量的值。
代码语言:txt
复制
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;
  }
}
  1. 最后,在按钮的点击事件中调用toggleMenu()方法来切换mat-menu的打开状态。
代码语言:txt
复制
<button mat-button [matMenuTriggerFor]="menu" [class.menu-open]="isMenuOpen" (click)="toggleMenu()">Open Menu</button>

这样,当点击按钮时,mat-menu会打开,并且按钮的背景颜色会变为红色。当再次点击按钮时,mat-menu会关闭,并且按钮的背景颜色会恢复默认值。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券