最小化角度材質對話框

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

我嘗試做同樣的事情，但實際上沒有任何效果。 最終創建了這個做同樣事情的庫。 最小最大彈出