如何在角材料的下拉列表中显示表单? [英] How to show a form on a dropdown in angular material?

问题描述

我想在单击 icon 时显示一个简单的 form(如下图所示)作为 dropdown.我查看了角度材料的组件列表，但找不到任何合适的组件.有

解决方案

您可以使用 MatMenu，但您需要做一些事情才能使其工作.

首先是不使用mat-menu-item.这会强制对项目进行样式设置，使其具有您期望的菜单项的固定高度.

第二个是防止交互传播回菜单导致它在您尝试使用表单时关闭.在菜单内窗体的最外层父级上使用 Event.stopPropagation() 函数.您可能还希望在背景上单击菜单外部时防止菜单关闭(并添加您自己的关闭或取消按钮).这看起来像:

<div (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()"><form class="menu-form">...

您还需要注意样式问题.您的表单容器需要占据整个菜单，以便用户无法在菜单之外单击但仍在菜单上，从而导致其关闭.并且您需要覆盖 MatMenu 添加到其 mat-menu-content 容器的默认填充.此样式需要在您的全局样式表中，而不是在组件样式中，您将在此处添加表单布局:

//覆盖 mat-menu-content 填充.menu-form-wrapper .mat-menu-content:not(:empty) {填充:0；}//表单布局.menu-form-wrapper .menu-form {显示:弹性；弹性方向:列；填充:24px；}

这里是 StackBlitz.

I want to show a simple form (as shown in image below) as a dropdown when an icon is clicked. I looked into the component list of angular material but I couldn't find any suitable component for this. There is menu but that can't be used in this case.

Does someone know how can I achieve this?

解决方案

You can use MatMenu, but you need to do a few things to make it work.

The first is to not use mat-menu-item. This forces styling on the item so that it has a fixed height of what you would expect for a menu item.

The second is to prevent interaction from propagating back to the menu causing it to close whenever you try to use the form. Use the Event.stopPropagation() function on the outer-most parent of your form inside the menu. You might also want to prevent the menu from closing when you click outside it on the backdrop (and add your own close or cancel button). That will look something like:

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

You also need to take care of styling issues. Your form container needs to take up the entire menu so that the user can't click outside of it but still on the menu, causing it to close. And you need to override the default padding that MatMenu adds to its mat-menu-content container. This style needs to be in your global style sheet, not in the component style, and it is where you will add your form's layout:

// 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;
}

Here it is on StackBlitz.

这篇关于如何在角材料的下拉列表中显示表单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！