要将matMenuTriggerFor区域更改为仅在箭头上方触发,可以使用以下步骤:
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu" class="custom-menu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
<button mat-menu-item>Item 3</button>
</mat-menu>
.custom-menu.mat-menu-panel {
position: absolute;
top: -24px; /* 负值用于将菜单移到箭头上方 */
}
这样,在点击按钮的箭头上方时,下拉菜单就会触发显示。注意,这里只是通过调整样式来实现效果,不需要修改任何JavaScript代码。
希望以上解答能够满足你的需求。如果有任何疑问,请随时提问。
领取专属 10元无门槛券
手把手带您无忧上云