角度材质材质-菜单

Question

我正在使用Angular 8和Angular材质，并想为一个垂直点菜单创建一个弹出窗口，它看起来像这样的图像(相应的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>

使用角度材料，我已经成功地创建了下面的弹出窗口(相应的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元素将实现您想要的效果。但是，请注意，重新设置角度材质元素的样式是出了名的烦人的事情，但您可以在网上找到大量的示例。