Angular Material 菜单位置 [英] Angular Material menu position

问题描述

Angular 材质菜单(https://material.angular.io/components/menu/overview) 在子菜单打开时与主菜单重叠.有什么办法可以从菜单按钮底部启动子菜单?

Angular material menu (https://material.angular.io/components/menu/overview) overlaps the main menu when sub menu opens. Is there any way i can start the submenu from bottom of my menu button?

我尝试在全局 css 中设置 css，但它也适用于相应的子菜单.

I have tried setting css in global css however it gets applied to respective sub menus as well.

.cdk-overlay-pane {margin-top: 40px;}这不起作用.

.cdk-overlay-pane {margin-top: 40px;} This doesn't work.

如果有人有解决方案，请告诉我.

Please let me know if anyone has solution.

谢谢.

推荐答案

如果你将 [overlapTrigger]="false" 添加到你的 mat-menu 中，你会得到想要的效果.

If you add [overlapTrigger]="false" to your mat-menu, you will get desired effect.

有了这个设置，点击菜单按钮，下拉菜单将在按钮下打开.

With that set, clicking on menu button, dropdown will open under button.

示例如下:

  <button mat-button [matMenuTriggerFor]="menu">Menu</button>
    <mat-menu #menu="matMenu" [overlapTrigger]="false">
       <button mat-menu-item>Item 1</button>
       <button mat-menu-item>Item 2</button>
    </mat-menu>

这篇关于Angular Material 菜单位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！