最小化角度材质对话框

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。 此外，定制那么多现有和维护的官方库通常也不太方便。 相反，我建议您将数据传递到他们制作的另一个新组件中，称为底表。

添加/编辑：

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

• 最终禁用关闭功能。
• 将其放在侧面或切换到水平布局
• 然后你可以在它上面添加一个修饰符类

例子：

.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

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