Angular2材料對話框的CSS，對話框的大小

Angular2材料團隊最近發佈了MDDialog https://github.com/angular/material2/blob/master/src/lib/dialog/README.md Angular2材料對話框的CSS，對話框的大小

我想改變外觀和感覺的angular2材料的對話框。例如，要更改彈出式容器的固定大小並使其可滾動，請更改背景顏色，等等。最好的方法是什麼？有沒有我可以玩的CSS？

來源

2016-11-14 E Ma

您可以使用開發工具檢查對話框元素，並查看mdDialog上應用了哪些類。

例如，.md-dialog-container是MDDialog的主要CLASSE並具有填充：24px的

您可以創建自定義的CSS覆蓋任何你想要的

.md-dialog-container { background-color: #000; width: 250px; height: 250px }

在我看來，這不是一個很好的選擇，可能會違背材質指南，但由於它沒有它以前版本中的所有功能，因此您應該按照您認爲最適合您的方式進行操作。

來源

2016-11-22 15:24:21

謝謝，我最終添加了一個DIV和樣式。 –

這不適用於這個對話框 - https://material.angular.io/components/component/dialog ..更改不適用 – bukajcihaj

@bukajcihaj據我所知，角度材料的CSS類已經改變了一點，所以，就像我在我的回答中所說的那樣，使用開發工具來查看哪些類應用於對話框並且覆蓋它們。你也可以看下面的答案。 –

md-dialog-content中的內容可自動滾動。

您可以在通話大小手動設置爲MdDialog.open

let dialogRef = dialog.open(MyComponent, { 
    height: '400px', 
    width: '600px', 
});

更多文檔/滾動和尺寸的例子： https://material.angular.io/components/dialog/overview

應該由你的主題確定一些顏色。看到這裏的主題文檔： https://material.angular.io/guide/theming

如果你想覆蓋顏色等，使用埃爾默的技術，只是添加適當的CSS。

請注意，您必須在頁面上的HTML 5 <!DOCTYPE html>爲你的對話框的大小，以符合正確的內容（https://github.com/angular/material2/issues/2351）

來源

2017-01-26 02:20:25

有兩種方法，我們可以使用在改變你的MdDialog組件的大小角材料

1）從外部部件，其呼叫對話框組件

import { MdDialog, MdDialogConfig, MdDialogRef } from '@angular/material'; 


dialogRef: MdDialogRef <any> ; 

constructor(public dialog: MdDialog) { } 

openDialog() { 
     this.dialogRef = this.dialog.open(TestTemplateComponent, { 
      height: '40%', 
      width: '60%' 
     }); 
     this.dialogRef.afterClosed().subscribe(result => { 
      this.dialogRef = null; 
     }); 
    }

2）從內部對話框組件。在對話單元的任何函數動態地改變其大小

import { MdDialog, MdDialogConfig, MdDialogRef } from '@angular/material'; 

constructor(public dialogRef: MdDialogRef<any>) { } 

ngOnInit() { 
     this.dialogRef.updateSize('80%', '80%'); 
    }

使用updateSize（）。它會自動改變對話框的大小。

更多信息，檢查此鏈接https://material.angular.io/components/component/dialog

來源

2017-05-29 07:25:19

有關最新版本的角，因爲這帖子，看來你必須首先創建一個MatDialogConfig對象，並把它作爲第二個參數來dialog.open（），因爲Typescript期望第二個參數是MatDialogConfig類型。

const matDialogConfig = new MatDialogConfig(); 
matDialogConfig.width = "600px"; 
matDialogConfig.height = "480px"; 
this.dialog.open(MyDialogComponent, matDialogConfig);

來源

2017-11-22 21:16:47

我想你需要使用/deep/，因爲你的CSS可能看不到你的模態類。例如，如果你想定製.modal-dialog

/deep/.modal-dialog { 
    width: 75% !important; 
}

但這個代碼將修改所有的模態窗口，更好的解決方案將是

:host { 
    /deep/.modal-dialog { 
    width: 75% !important; 
    } 
}

來源

2017-11-29 15:41:37

共享上墊對話框 2種實現的方式獲取最新這... 1）或者你在打開例如設置寬度和高度

let dialogRef = dialog.open(NwasNtdSelectorComponent, { 
     data: { 
      title: "NWAS NTD" 
     }, 
     width: '600px', 
     height: '600px', 
     panelClass: 'epsSelectorPanel' 
    });

或 2）使用panelClass和風格它相應。

1）最簡單，但2）更好，更可配置。

來源

2018-03-09 01:40:27 erickyi2006

Angular2材料對話框的CSS，對話框的大小

回答

相關問題