Angular2 Material Dialog css，对话框大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40595276/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular2 Material Dialog css, dialog size
提问by ethan
Angular2 material team recently released the MDDialog https://github.com/angular/material2/blob/master/src/lib/dialog/README.md
Angular2 材质团队最近发布了 MDDialog https://github.com/angular/material2/blob/master/src/lib/dialog/README.md
I'd like to change the looking and feel about the angular2 material's dialog. For example, to change the fixed size of the popup container and make it scrollable, change the background color, so forth. What's the best way to do so? Is there a css that I can play with?
我想更改 angular2 材质对话框的外观和感觉。例如，要更改弹出容器的固定大小并使其可滚动，请更改背景颜色等。这样做的最佳方法是什么？有我可以玩的css吗？
采纳答案by Elmer Dantas
You can inspect the dialog element with dev tools and see what classes are applied on mdDialog.
您可以使用开发工具检查对话框元素，并查看在 mdDialog 上应用了哪些类。
For example, .md-dialog-containeris the main classe of the MDDialog and has padding: 24px
例如，.md-dialog-container是 MDDialog 的主类并且具有填充：24px
you can create a custom CSS to overwrite whatever you want
您可以创建自定义 CSS 来覆盖您想要的任何内容
.md-dialog-container {
background-color: #000;
width: 250px;
height: 250px
}
In my opinion this is not a good option and probably goes against Material guide but since it doesn't have all features it has in it's previous version, you should do what you think is best for you.
在我看来，这不是一个好的选择，可能与 Material 指南背道而驰，但由于它没有以前版本中的所有功能，您应该做您认为最适合您的事情。
回答by Alexander Taylor
Content in md-dialog-contentis automatically scrollable.
内容md-dialog-content可自动滚动。
You can manually set the size in the call to MdDialog.open
您可以在调用中手动设置大小 MdDialog.open
let dialogRef = dialog.open(MyComponent, {
height: '400px',
width: '600px',
});
Further documentation / examples for scrolling and sizing: https://material.angular.io/components/dialog/overview
滚动和调整大小的更多文档/示例：https: //material.angular.io/components/dialog/overview
Some colors should be determined by your theme. See here for theming docs: https://material.angular.io/guide/theming
某些颜色应由您的主题决定。有关主题文档，请参见此处：https: //material.angular.io/guide/theming
If you want to override colors and such, use Elmer's technique of just adding the appropriate css.
如果您想覆盖颜色等，请使用 Elmer 的仅添加适当 css 的技术。
Note that you must have the HTML 5 <!DOCTYPE html>on your page for the size of your dialog to fit the contents correctly ( https://github.com/angular/material2/issues/2351)
请注意，您<!DOCTYPE html>的页面上必须有 HTML 5才能使对话框的大小正确适合内容（https://github.com/angular/material2/issues/2351）
回答by Amit kumar
There are two ways which we can use to change size of your MatDialog component in angular material
我们可以使用两种方法来更改角度材料中 MatDialog 组件的大小
1) From Outside Component Which Call Dialog Component
1) 从外部组件调用 Dialog 组件
import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material';
dialogRef: MatDialogRef <any> ;
constructor(public dialog: MatDialog) { }
openDialog() {
this.dialogRef = this.dialog.open(TestTemplateComponent, {
height: '40%',
width: '60%'
});
this.dialogRef.afterClosed().subscribe(result => {
this.dialogRef = null;
});
}
2) From Inside Dialog Component. dynamically change its size
2) 从对话框组件内部。动态改变其大小
import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material';
constructor(public dialogRef: MatDialogRef<any>) { }
ngOnInit() {
this.dialogRef.updateSize('80%', '80%');
}
use updateSize() in any function in dialog component. it will change dialog size automatically.
在对话框组件的任何函数中使用 updateSize()。它将自动更改对话框大小。
for more information check this link https://material.angular.io/components/component/dialog
有关更多信息，请查看此链接https://material.angular.io/components/component/dialog
回答by Kostas Siabanis
With current version of Angular Material (6.4.7) you can use a custom class:
使用当前版本的 Angular Material (6.4.7)，您可以使用自定义类：
let dialogRef = dialog.open(UserProfileComponent, {
panelClass: 'my-class'
});
Now put your class somewhere global (haven't been able to make this work elsewhere), e.g. in styles.css:
现在将您的课程放在全球某个地方（无法在其他地方进行这项工作），例如styles.css：
.my-class .mat-dialog-container{
height: 400px;
width: 600px;
border-radius: 10px;
background: lightcyan;
color: #039be5;
}
Done!
完毕！
回答by Adam Prax
For the most recent version of Angular as of this post, it seems you must first create a MatDialogConfig object and pass it as a second parameter to dialog.open() because Typescript expects the second parameter to be of type MatDialogConfig.
对于本文中最新版本的 Angular，您似乎必须首先创建一个 MatDialogConfig 对象并将其作为第二个参数传递给 dialog.open()，因为 Typescript 期望第二个参数的类型为 MatDialogConfig。
const matDialogConfig = new MatDialogConfig();
matDialogConfig.width = "600px";
matDialogConfig.height = "480px";
this.dialog.open(MyDialogComponent, matDialogConfig);
回答by Volodymyr Khmil
I think you need to use /deep/, because your CSS may not see your modal class. For example, if you want to customize .modal-dialog
我认为您需要使用/deep/，因为您的 CSS 可能看不到您的模态类。例如，如果您想自定义.modal-dialog
/deep/.modal-dialog {
width: 75% !important;
}
But this code will modify all your modal-windows, better solution will be
但是这段代码会修改你所有的模态窗口，更好的解决方案是
:host {
/deep/.modal-dialog {
width: 75% !important;
}
}
回答by erickyi2006
sharing the latest on mat-dialog two ways of achieving this... 1) either you set the width and height during the open e.g.
在 mat-dialog 上分享最新的两种实现方式... 1）要么在打开时设置宽度和高度，例如
let dialogRef = dialog.open(NwasNtdSelectorComponent, {
data: {
title: "NWAS NTD"
},
width: '600px',
height: '600px',
panelClass: 'epsSelectorPanel'
});
or
2) use the panelClassand style it accordingly.
或 2) 使用panelClass并相应地设置样式。
1) is easiest but 2) is better and more configurable.
1) 最简单，但 2) 更好，更可配置。
回答by Anish Kutti
On smaller screen's like laptop the dialog will shrink. To auto-fix, try the following option
在像笔记本电脑这样的小屏幕上，对话框会缩小。要自动修复，请尝试以下选项
http://answersiouldntfindanywhereelse.blogspot.com/2018/05/angular-material-full-size-dialog-on.html
Additional Reading https://material.angular.io/cdk/layout/overview
附加阅读 https://material.angular.io/cdk/layout/overview
Thanks to the solution in answersicouldntfindanywhereelse (2nd para). it worked for me.
感谢 answersicouldntfindanywhereelse（第 2 段）中的解决方案。它对我有用。
Following is needed
需要以下
import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout'
从 '@angular/cdk/layout' 导入 { Breakpoints, BreakpointObserver }
回答by Gerhardengel
This worked for me:
这对我有用：
dialogRef.updateSize("300px", "300px");
回答by Kevin V
You can also let angular material solve the size itself depending on the content. This means you don't have to cloud your TS files with sizes that depend on your UI. You can keep these in the HTML/CSS.
您还可以让角材料根据内容自行解决尺寸问题。这意味着您不必将 TS 文件的大小取决于您的 UI。您可以将这些保留在 HTML/CSS 中。
my-dialog.html
我的对话框.html
<div class="myContent">
<h1 mat-dialog-title fxLayoutAlign="center">Your title</h1>
<form [formGroup]="myForm" fxLayout="column">
<div mat-dialog-content>
</div mat-dialog-content>
</form>
</div>
my-dialog.scss
我的对话框.scss
.myContent {
width: 300px;
height: 150px;
}
my-component.ts
我的component.ts
const myInfo = {};
this.dialog.open(MyDialogComponent, { data: myInfo });
