angular - 如何在有角材料的下拉列表中显示表单？

Question

我想在单击时显示一个简单的form（如下图所示）。我查看了有角材料的组件列表，但找不到任何合适的组件。有菜单，但在这种情况下不能使用。dropdownicon

有人知道我怎样才能做到这一点吗？

标签： angularangular-material

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 上。