angular - 最小化角度材料对话框

Question

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

Answer 1

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

概念方面： 1. 它在容器数组容器中收集弹出窗口所需的元素 = [{ButtonLabel:"First", dialogId:0, animal: "cat"}];

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

3. 添加一个新的 id 并作为 dialogId（一个新属性）给出

Answer 2

我认为您应该开始至少在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 3

我尝试做同样的事情，但实际上没有任何效果。最终创建了这个做同样事情的库。最小-最大-弹出