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

问题描述

我想在单击icon时将简单的form(如下图所示)显示为dropdown.我查看了角形材料的组件列表，但找不到适合的组件.有 菜单 ，但不能用于这种情况.

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?

推荐答案

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

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

第一个是不使用mat-menu-item.这会强制在项目上设置样式，以使其具有与菜单项目相同的固定高度.

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.

第二个是防止交互传播回菜单，从而在您尝试使用表单时将其关闭.在菜单内表单最外面的父级上使用Event.stopPropagation()函数.您可能还想防止菜单在背景幕上单击时关闭(并添加您自己的关闭或取消按钮).看起来像这样:

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">
    ...

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

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

此处位于StackBlitz上.

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