Как сделать, чтобы меню mat-menu (angular/material) было ниже?

Question

[Алёна Хреновская]

Имеем:

код:

<nav mat-tab-nav-bar class="system-bar">
    <a mat-tab-link [routerLink]="['/system', 'jobs']" class="system-button"> All jobs </a>
    <a mat-tab-link [routerLink]="['/system', 'contracts']" class="system-button"> Your contracts </a>
    <a mat-tab-link [matMenuTriggerFor]="menu" class="user-menu"> Здравствуйте, {{user.username}}</a>
    <mat-menu #menu>
      <button mat-menu-item="" class="system-button" (click)="onLogout()">Выход</button>
    </mat-menu>
  </nav>

Как сделать так, чтобы меню не было таким уродским и выползало снизу?)) Свойство direction не помогает. Речь о выпадающем меню.

Answer 1

[Ivan Stroykin]

Для этого необходимо использовать [overlapTrigger]="false"

Пример кода:

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu" [overlapTrigger]="false">
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
</mat-menu>

Пример готовой реализации:

Comments

[Алёна Хреновская]

Огромнейшее спасибо!!!