将 mat-menu 放置在 Angular 材料中的触发器顶部答案

【问题标题】：Position mat-menu on top of the trigger in Angular material将 mat-menu 放置在 Angular 材料中的触发器顶部
【发布时间】：2020-11-29 08:30:56
【问题描述】：

您好，我想将 mat-menu 放在菜单触发器的顶部。请在下面找到我的代码

<button (mouseover)="createMenuTrigger.openMenu() #createMenuTrigger="matMenuTrigger" [matMenuTriggerFor="createPlan"> OnHover </button>


<mat-menu #createPlan="matMenu">
   <button>Menu1</button>
   <button>Menu2</button
</mat-menu>

在运行上述代码时，菜单面板显示触发器的底部或顶部。但它应该在触发器顶部打开。

当前工作菜单位置： Menu is opening on top or below the trigger

预期的菜单面板： Menu panel should show on top the trigger 'onHover' button.

请帮助我解决此 UI 更改。对于此更改，我没有得到任何有效的解决方案。提前致谢

【问题讨论】：

标签： angular angular-material angular-flex-layout

【解决方案1】：

您可以在 mat 菜单中简单地使用[overlapTrigger]="false"，如下所示：

<mat-menu #menu="matMenu" [overlapTrigger]="false"><mat-menu>

FIR：https://www.angularjswiki.com/material/menu/

【讨论】：

【解决方案2】：

您可以“玩” xPosition 和 yPosition 属性，请参阅MenuPositionX and menuPositionY

例如

<mat-menu #menu="matMenu" yPosition="above" xPosition="before">

在顶部和左侧显示菜单如果有足够的空间。

您还可以使用 classPane 将类添加到 mat-menu

<mat-menu #menu="matMenu" class="myMenu">

并在styles.css中添加，例如(*)

{
   .mat-menu-panel.myMenu {
    margin-top: -100px;
}

(*) 您需要将 .css 中的类添加到所有应用程序中，您不能在 component.css 中添加类，也可以使用 ViewEncapsulation.None （这使得组件中的所有 .css 都是适用于所有应用程序）。原因是 mat-menu 在不属于组件的 cdk-overlay 中创建菜单

【讨论】：