Angular Material Mat-菜单

Question

我正在使用带有 Angular Material 的 Angular 8，并希望为垂直点菜单创建一个弹出窗口，看起来像这张图片（下面添加了相应的 html）：

<div>
    <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle overflow-menu-toggle" data-flip="false" data-toggle="dropdown" href="#" id="dropdownOverflowMenu_v" role="button"><i class="material-icons">more_vert</i></a>
    <div aria-labelledby="dropdownOverflowMenu_v" class="dropdown-menu overflow-menu overflow-menu--vertical dropdown-menu-right dropright">
        <button class="dropdown-item"><i class="material-icons">email</i> Message </button>
        <button class="dropdown-item"><i class="material-icons">vertical_align_bottom</i> Download </button>
        <button class="dropdown-item"><i class="material-icons">edit</i> Edit </button>
        <button class="dropdown-item"><i class="material-icons">delete</i> Delete </button></div>
</div>

使用 Angular Material，我设法创建了以下弹出窗口（在下面添加了相应的 html），但无法获得顶部三角形，如扩展部分（如上图中突出显示的部分）

<mat-menu #actionmenu="matMenu" class="actionMenu">
                  <mat-list>
                    <div *ngIf="item.isEditable">
                      <div mat-subheader><b>ACTIONS</b></div>
                      <mat-list-item>
                        <button mat-flat-button class="p-0" (click)="onEdit(item)">
                          <i class="material-icons">edit</i>
                          Edit
                        </button>
                      </mat-list-item>
                      <mat-list-item>
                        <button mat-flat-button class="p-0" (click)="onDelete(item)">
                          <i class="material-icons">delete</i>
                          Delete
                        </button>
                      </mat-list-item>
                    </div>
                  </mat-list>
                </mat-menu>

你能帮忙吗？

Answer 1

添加一个正确定位的三角形 CSS ::before 元素将达到您想要的效果。但是请注意，重新设计 Angular Material 元素的样式是出了名的烦人，但您可以在网上找到大量示例。