Для отображения пунктов меню мат под кнопкой меню мат

Question

Я использую Menu with icons компонент. Здесь можно нажать кнопку (меню i, e). Элементы меню (элементы меню i, e mat) отображаются над кнопкой, как показано на изображении ниже.

Я хочу, чтобы элементы (без выхода из системы) отображались под кнопкой меню. Я попытался задать margin и padding свойства по-прежнему не дают результата.

Вот ссылка stackblitz .

Answer 1

Если вы просто хотите предотвратить наложение триггера самого меню, mat-menu имеет собственный атрибут только для этого.Он называется overlapTrigger, и если вы установите его на false, пункт меню не будет перекрывать ваш триггер (значок учетной записи).См. Пример кода ниже:

<mat-menu #menu="matMenu" [overlapTrigger]="false">
   <button mat-menu-item>
       <mat-icon>power_settings_new</mat-icon>
       <span>Logout</span>
   </button>
</mat-menu>

Полный пример на разветвленный стек

Подробнее об этом можно прочитать прямо здесь .