是否可以通过单击按钮包装<mat-menu>卡，将其视为一张卡？

Question

我想知道是否有可能将和按钮的内容包装起来，从而触发扩展使其成为一张卡吗？目前，下拉菜单在我触发下拉菜单的按钮底部代表一张卡。有没有一种方法可以将它们包装在下拉菜单中，使它们成为一张卡，而不是将内容和按钮卡分开。

我尝试添加[class.mat-card] =“ menuTrigger.menuOpen”，但是它向按钮添加了单独的mat-card类，然后在中使用单独的card打开下拉菜单。我对Angular Material完全陌生。

      <div class="NavbarUser"
           #menuTrigger="matMenuTrigger"
           [matMenuTriggerFor]="menu">
        <tl-mat-button
          [noPadding]="true"
          [colorTheme]="'linkGrey'"
          class="NavbarUserName tl-mat-padding-r- 
                 base">
            {{ input.user.fullName }}
        </tl-mat-button>

        <tl-mat-image-thumbnail
          class="Profile__Dropdown--Thumbnail"
          [size]="'small'"
          [thumbnailUrl]="input.user.thumbnailUrl"
        >
        </tl-mat-image-thumbnail>
        <mat-icon class="Profile__DropdownArrow--Icon">
          {{menuTrigger.menuOpen ? 'expand_less' : 'expand_more'}}
        </mat-icon>
        <mat-menu #menu="matMenu">
          <div><hr class="Profile__Dropdown--Separator" /></div>
          <button mat-menu-item
          *ngFor="let profileButton of input.dropDownPaths"
          [routerLink]="profileButton.relativeUrl">
            <img
              class="Profile__Dropdown--Icons"
              src="{{profileButton.iconUrl}}"/>
                <span class="Profile__Dropdown--Text">
                  {{profileButton.title}}
                </span>
          </button>
        </mat-menu>
      </div>

我要实现的是单击“个人资料”下拉菜单以展开其他选项。它看起来应该类似于：https://codepen.io/cssmenumax/pen/vNXdeL 所不同的是，我只想单击扩展下拉菜单来添加卡片背景。开始时，它应该没有任何样式。角材料可以实现吗？预先谢谢你。