最小化角材料对话框

Question

任何人都可以帮助我如何保持如下所示的最小化“角材料”对话框吗？我想打开多个对话框并能够在它们之间切换。在有角度的材质中这可能吗（我只能使用材质对话框组件打开堆叠对话框的对话框）？

Answer 1

我认为您应该至少在Codesandbox或Stackblitz上创建一个bin。 同样，定制这么多现有的和维护的官方图书馆通常没有那么方便。相反，我建议您将数据传递给他们创建的另一个新组件，称为bottom-sheet。

添加/编辑：

您可以使用该组件保持最小化，然后：

• 最终禁用关闭功能。
• 将其放在侧面或切换为水平布局
• 然后您可以在其顶部添加修饰符类

示例：

.mat-bottom-sheet-container--horizontal .mat-nav-list { 
  display: flex
}

.mat-bottom-sheet-container--horizontal .mat-list-item {
  height: 45px;
  background-color: rgba(0,0,0,0.1);
  margin: 0 12px;
  padding: 0 12px;
}

显然，您还需要实现按钮以关闭/删除它们。

Answer 2

创建了一个角度为2的材质弹出窗口，该弹出窗口可以最小化 https://stackblitz.com/edit/angular-matminidialog

明智的做法： 1.它在容器数组中收集弹出窗口所需的元素  container = [{ButtonLabel：“ First”，dialogId：0，动物：“ cat”}];

1. 在关闭对话框时，使用this.dialogRef.close以便可以返回数据对象

2. 添加了一个新ID，并将其指定为dialogId（新属性）

Answer 3

我尝试过做同样的事情，但实际上没有任何效果。最终创建了这个做同样事情的库。 Min-Max-Popup