顶部右侧的Angular Material卡片菜单

要创建一个顶部右侧的Angular Material卡片菜单，可以使用Angular Material的Menu组件和Card组件。以下是一个示例代码，演示了如何实现这个效果：

1. 首先，确保你已经安装了Angular Material，并在你的项目中导入了相关的模块。可以使用以下命令安装Angular Material：

npm install @angular/material

2. 在你的组件模板中，添加一个按钮或图标，用于触发菜单的显示。这里使用了一个mat-icon图标作为按钮：

<button mat-icon-button [matMenuTriggerFor]="menu">
  <mat-icon>more_vert</mat-icon>
</button>

3. 在组件的TS文件中，导入Menu和Card相关的模块，并定义一个菜单引用变量和一个布尔变量，用于控制菜单的显示和隐藏：

import { Component } from '@angular/core';
import { MatMenuTrigger } from '@angular/material/menu';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent {
  menu: MatMenuTrigger;
  isMenuOpen: boolean = false;
}

4. 在模板中，使用mat-menu指令创建一个菜单，并将其与按钮关联起来。可以使用mat-menu-item指令添加菜单项：

<mat-menu #menu="matMenu" [overlapTrigger]="false" [hasBackdrop]="false" (closed)="isMenuOpen = false">
  <button mat-menu-item>菜单项1</button>
  <button mat-menu-item>菜单项2</button>
  <button mat-menu-item>菜单项3</button>
</mat-menu>

5. 最后，添加一个方法来处理菜单的打开和关闭事件。在方法中，设置isMenuOpen变量的值为true或false，以控制菜单的显示和隐藏：

toggleMenu() {
  this.isMenuOpen = !this.isMenuOpen;
  if (this.isMenuOpen) {
    this.menu.openMenu();
  } else {
    this.menu.closeMenu();
  }
}

6. 在按钮或图标的点击事件中调用toggleMenu方法，以触发菜单的显示和隐藏：

<button mat-icon-button [matMenuTriggerFor]="menu" (click)="toggleMenu()">
  <mat-icon>more_vert</mat-icon>
</button>

现在，当你点击按钮或图标时，就会显示出一个顶部右侧的Angular Material卡片菜单。你可以根据需要进一步自定义菜单的样式和布局。