角度材质菜单位置

时间:2018-09-28 06:04:15

标签: angular menu angular-material material

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

我尝试在全局css中设置css,但是它也适用于各个子菜单。

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

请让我知道是否有人可以解决。

谢谢。

1 个答案:

答案 0 :(得分:5)

如果将[overlapTrigger] =“ false”添加到您的菜单中,您将获得理想的效果。

设置完成后,点击菜单按钮,下拉菜单将在按钮下方打开。

以下是示例:

  <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>