Question

我在角材料本身中尝试了xPosition和yPostion。但它不起作用。我不知道我是否想念东西。

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

我引用了几个链接，这些链接表明问题已解决。 Refere here。

我想不通。

谢谢。

Answer 1

这是很痛苦的事情，但是我有一个解决方法。在单独的CSS文件中，您可以提及：

::ng-deep.mat-menu-panel {
/* These numbers are my requirement, put something which suits yours */
  transform: translate(0px, 32px); 
}

但是，即使在进行此更改后仍遇到此问题，也可以将其转到覆盖面板的下一步：

::ng-deep.cdk-overlay-pane{
  transform: translate(0px, 32px);
}

祝你好运。希望这会有所帮助...

Answer 2

这对我来说非常有效。你什么都不会错过。代码正确。这取决于您要添加的方向。

image1： https://jquerymodal.com

image2： enter image description here

在这些图像中，具有相同的代码，在第一张照片中，按钮下方没有空格。

Answer 3

可能您已经解决了，但是无论如何我都在发布，也许对某些人有用。
如果您遵循the docs，它应该可以正常运行（请参阅#customizing-menu-position section）。
它可能无法工作的原因可能取决于您放置菜单的位置：例如，如果您尝试使用yPosition = above打开菜单，则它必须有足够的空间可以在上方打开，否则它将在下方打开。与xPosition相同。
我知道这听起来很愚蠢，但是对我来说，这是行不通的原因。 HTML：

    <button class="myButton" mat-button [matMenuTriggerFor]="menu">Menu</button>
  <mat-menu yPosition="above" #menu="matMenu">
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
  </mat-menu>

CSS：

.myButton{
  margin-top: 90px;
}

菜单中的xPosition和yPosition无法正常工作

3 个答案: