Как показать форму раскрывающегося в угловом материале?

Question

Я хочу показать form (как показано на рисунке ниже) как dropdown при нажатии icon.Я просмотрел список компонентов углового материала, но не смог найти подходящий для этого компонент.Существует меню , но в этом случае его нельзя использовать.

Кто-нибудь знает, как мне этого добиться?

Answer 1

Вы можете использовать MatMenu, но вам нужно сделать несколько вещей, чтобы он заработал.

Во-первых, не использовать mat-menu-item.Это вынуждает стилизовать элемент так, чтобы он имел фиксированную высоту, равную ожидаемой для элемента меню.

Второй - предотвращение распространения взаимодействия обратно в меню, приводящее к его закрытию при попытке использования.форма.Используйте функцию Event.stopPropagation () на крайнем родительском элементе вашей формы внутри меню.Вы также можете запретить закрытие меню, когда вы нажимаете за пределами него на фоне (и добавляете свою собственную кнопку закрытия или отмены).Это будет выглядеть примерно так:

<mat-menu class="menu-form-wrapper" [hasBackdrop]="false">
  <div (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()">
    <form class="menu-form">
    ...

Вам также нужно позаботиться о стайлинге.Контейнер формы должен занимать все меню, чтобы пользователь не мог щелкнуть за его пределами, но все еще в меню, вызывая его закрытие.И вам нужно переопределить заполнение по умолчанию, которое MatMenu добавляет в свой контейнер mat-menu-content.Этот стиль должен быть в вашей глобальной таблице стилей, а не в стиле компонента, и именно здесь вы добавите макет вашей формы:

// override mat-menu-content padding
.menu-form-wrapper .mat-menu-content:not(:empty) {
  padding: 0;
}

// layout for the form
.menu-form-wrapper .menu-form {
  display: flex;
  flex-direction: column;
  padding: 24px;
}

Здесь он находится в StackBlitz .

Answer 2

Если Меню API не полезно в вашем случае,
, тогда вы можете использовать Dialog Api с updatePositionи с помощью hasBackdrop: false.

• Использование hasBackdrop: false не создаст наложение.
• Откройте диалоговое окно рядом с кнопкой, с которой вы хотите отобразить раскрывающийся список.
• Диалог открытия демонстрации в нужном месте

Открыть диалог из компонента как:

let  dialogRef = this.dialog.open(ExampleDialogComponent, {
        width: '250px',
        data: filterData,
        hasBackdrop: false,
        panelClass: 'filter-popup'
      });

В диалоговом компоненте:

ngOnInit() {
    this.filterData = this.data;
    const rightMostPos = window.innerWidth - Number(this.filterData.left);
    this.dialogRef.updatePosition({ top: `${this.filterData.top}px`,
    right: `${rightMostPos}px`});
  }

Код приложения:
https://stackblitz.com/edit/angular-mat-dialog-updated-position?file=app%2Fexample%2Fexample-dialog%2Fexample-dialog.component.ts