将训练框放在垫子菜单的顶部

Question

我的菜单如下。如何在下拉菜单中向上放置一个三角形。

  <button mat-icon-button [matMenuTriggerFor]="appMenu">
    <mat-icon>arrow_drop_down</mat-icon>
  </button>

  <mat-menu #appMenu="matMenu">
    <button mat-menu-item [matMenuTriggerFor]="subMenu"><span translate="">header.menu.language</span></button>
  </mat-menu>

  <mat-menu #subMenu="matMenu">
    <button mat-menu-item *ngFor="let language of languages" (click)="setLanguage(language)">{{ language }}</button>
  </mat-menu>

当前外观

我想要

我添加了以下CSS，而不是在div内使用CSS添加了mat-menu，但无法正常工作。

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;

  border-bottom: 5px solid black;
}

Answer 1

更新代码

.submenu                            { position: relative;}
.submenu:after                      { position: absolute; content: ''; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid black; left: 20px; bottom: 110%; }

<button mat-icon-button [matMenuTriggerFor]="appMenu">
    <mat-icon>arrow_drop_down</mat-icon>
  </button>

  <mat-menu #appMenu="matMenu">
    <button mat-menu-item [matMenuTriggerFor]="subMenu" class="submenu"><span translate="">header.menu.language</span></button>
  </mat-menu>

  <mat-menu #subMenu="matMenu">
    <button mat-menu-item *ngFor="let language of languages" (click)="setLanguage(language)" class="submenu" >{{ language }}</button>
  </mat-menu>

Answer 2

实际上，您可以使该三角形成为三角形，但是根据mat-menu的高度，该点position在随机view-port上是打开的，因此，如果添加该点以及调整窗口或选项卡上的大小或在小型Mac设备上，它向上打开，在这种情况下，您的意思就更少了。简而言之，您每次都无法绑定mat-menu使其在底部打开，以使箭头根据需要指向上方。

最好的解决方案是尝试使用默认样式的mat-menu。