如何根据MatMenu列表位置切换overlayPanelClass并调整caret指向

实现方案 #

1. 组件内监听菜单位置状态 #

在组件代码中，通过MatMenu的opened事件获取触发按钮和菜单面板的位置关系，判断菜单是否显示在按钮上方：

import { Component, ViewChild } from '@angular/core';
import { MatMenu } from '@angular/material/menu';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  @ViewChild('menu') menu!: MatMenu;
  isMenuAboveButton = false;

  onMenuOpened() {
    const triggerEl = this.menu.trigger?._elementRef.nativeElement;
    const menuEl = this.menu._overlayRef?.overlayElement;

    if (triggerEl && menuEl) {
      const triggerRect = triggerEl.getBoundingClientRect();
      const menuRect = menuEl.getBoundingClientRect();
      // 对比菜单底部和按钮顶部的位置，判断菜单是否在按钮上方
      this.isMenuAboveButton = menuRect.bottom < triggerRect.top;
    }
  }
}

2. 模板中动态绑定样式与面板类 #

在HTML模板里，根据isMenuAboveButton变量切换caret的方向样式，同时动态设置overlayPanelClass：

<button mat-button [matMenuTriggerFor]="menu">
  菜单触发按钮
  <span class="caret" [class.caret-down]="isMenuAboveButton" [class.caret-up]="!isMenuAboveButton"></span>
</button>

<mat-menu 
  #menu="matMenu" 
  [overlayPanelClass]="isMenuAboveButton ? 'menu-position-above' : ''"
  (opened)="onMenuOpened()"
>
  <button mat-menu-item>选项一</button>
  <button mat-menu-item>选项二</button>
  <button mat-menu-item>选项三</button>
</mat-menu>

3. 编写caret样式 #

在CSS中定义caret的两种方向样式，以及可选的菜单面板额外样式：

.caret {
  display: inline-block;
  margin-left: 6px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

/* 菜单在按钮上方时，caret向下 */
.caret-down {
  border-top: 4px solid currentColor;
}

/* 菜单在按钮下方时，caret向上 */
.caret-up {
  border-bottom: 4px solid currentColor;
}

/* 可选：给上方的菜单添加偏移或其他样式 */
.menu-position-above {
  margin-top: -8px;
}

说明 #

• 菜单打开时通过getBoundingClientRect()获取元素的位置信息，判断菜单是否处于按钮上方
• 利用Angular的属性绑定动态切换caret的CSS类，实现方向反转
• 通过[overlayPanelClass]的条件绑定，为不同位置的菜单添加自定义样式类

内容的提问来源于stack exchange，提问作者user808520