Поместите мат-меню поверх триггера в материале Angular

Привет, я хотел бы разместить матовое меню поверх триггера меню. Пожалуйста, найдите мой код ниже

<button (mouseover)="createMenuTrigger.openMenu() #createMenuTrigger="matMenuTrigger" [matMenuTriggerFor="createPlan"> OnHover </button>


<mat-menu #createPlan="matMenu">
   <button>Menu1</button>
   <button>Menu2</button
</mat-menu>

При выполнении приведенного выше кода на панели меню отображается нижняя или верхняя часть триггера. Но он должен открываться поверх спускового крючка.

Текущее положение рабочего меню: Меню открывается вверху или под триггером

Ожидаемая панель меню: Панель меню должна отображать вверху кнопку триггера onHover.

Пожалуйста, помогите мне исправить это изменение пользовательского интерфейса. У меня не было действительного решения для этого изменения. Заранее спасибо


angular angular-material angular-flex-layout
person Mcruz    schedule 09.08.2020    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете поиграть со свойствами xPosition и yPosition, см. MenuPositionX и menuPositionY

e.g.

<mat-menu #menu="matMenu" yPosition="above" xPosition="before">

Показать меню вверху и слева если места достаточно.

Вы также можете добавить класс в мат-меню с помощью classPane

<mat-menu #menu="matMenu" class="myMenu">

И добавьте в styles.css, например. (*)

{
   .mat-menu-panel.myMenu {
    margin-top: -100px;
}

(*) Вам нужно добавить класс в общий .css для всего приложения, вы не можете добавить класс в component.css, также вы используете ViewEncapsulation.None (чтобы все CSS-файлы в вашем компоненте применялись ко всем приложениям). Причина в том, что mat-menu создает меню в cdk-overlay, которое не принадлежит компоненту

person Eliseo    schedule 09.08.2020

arrow_upward
0
arrow_downward

Вы можете просто использовать [overlapTrigger]="false" в меню коврика, как показано ниже:

<mat-menu #menu="matMenu" [overlapTrigger]="false"><mat-menu>

РПИ: https://www.angularjswiki.com/material/menu/

person PaperinFlames    schedule 06.01.2021