Положите Traingle в верхней части меню коврика

Question

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

  <button mat-icon-button [matMenuTriggerFor]="appMenu">
    <mat-icon>arrow_drop_down</mat-icon>
  </button>

  <mat-menu #appMenu="matMenu">
    <button mat-menu-item [matMenuTriggerFor]="subMenu"><span translate="">header.menu.language</span></button>
  </mat-menu>

  <mat-menu #subMenu="matMenu">
    <button mat-menu-item *ngFor="let language of languages" (click)="setLanguage(language)">{{ language }}</button>
  </mat-menu>

Текущий вид

Я хочу

я добавил следующий CSS, а затем вложил mat-menu в div с помощью CSS, но не работает.

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;

  border-bottom: 5px solid black;
}

Answer 1

На самом деле вы можете сделать этот треугольник, но точка будет mat-menu открыта случайным образом position в соответствии с высотой view-port, поэтому, если вы добавите эту точку и при изменении размера окна или на вкладке или на небольших устройствах Mac она откроетсявверх, и ваша точка зрения имеет меньшее значение в этом случае. Короче говоря, вы не можете привязать mat-menu к открытию каждый раз внизу, чтобы стрелка указывала вверх по вашему желанию.

Лучшее решение - использовать mat-menu со стилями по умолчанию.

Answer 2

Обновить код

.submenu                            { position: relative;}
.submenu:after                      { position: absolute; content: ''; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid black; left: 20px; bottom: 110%; }

<button mat-icon-button [matMenuTriggerFor]="appMenu">
    <mat-icon>arrow_drop_down</mat-icon>
  </button>

  <mat-menu #appMenu="matMenu">
    <button mat-menu-item [matMenuTriggerFor]="subMenu" class="submenu"><span translate="">header.menu.language</span></button>
  </mat-menu>

  <mat-menu #subMenu="matMenu">
    <button mat-menu-item *ngFor="let language of languages" (click)="setLanguage(language)" class="submenu" >{{ language }}</button>
  </mat-menu>