Angular2材料团队最近发布了MDDialog https://github.com/angular/material2/blob/master/src/lib/dialog/README.md
我想改变 angular2 材质对话框的外观和感觉。例如，要更改弹出容器的固定大小并使其可滚动，更改背景颜色等等。最好的方法是什么？有我可以玩的css吗？
问问题
145080 次
11 回答
68
我们可以使用两种方法来更改角度材料中 MatDialog 组件的大小
1）从调用对话框组件的外部组件
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）从内部对话框组件。动态改变它的大小
import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material';
constructor(public dialogRef: MatDialogRef<any>) { }
ngOnInit() {
this.dialogRef.updateSize('80%', '80%');
}
在对话框组件的任何函数中使用 updateSize()。它将自动更改对话框大小。
有关更多信息，请查看此链接https://material.angular.io/components/component/dialog
于 2017-05-29T07:25:19.230 回答
61
内容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
如果您想覆盖颜色等，请使用 Elmer 的技术，即添加适当的 css。
请注意，您<!DOCTYPE html>的页面上必须有 HTML 5，以便您的对话框大小正确适合内容（https://github.com/angular/material2/issues/2351）
于 2017-01-26T02:20:25.327 回答
37
使用当前版本的 Angular Material (6.4.7)，您可以使用自定义类：
let dialogRef = dialog.open(UserProfileComponent, {
panelClass: 'my-class'
});
现在将您的课程放在全球某个地方（无法在其他地方进行这项工作），例如styles.css：
.my-class .mat-dialog-container{
height: 400px;
width: 600px;
border-radius: 10px;
background: lightcyan;
color: #039be5;
}
完毕！
于 2018-09-06T06:53:57.940 回答
19
您可以使用开发工具检查对话框元素并查看 mdDialog 上应用了哪些类。
例如，.md-dialog-container是 MDDialog 的主类，并且有 padding: 24px
您可以创建自定义 CSS 来覆盖您想要的任何内容
.md-dialog-container {
background-color: #000;
width: 250px;
height: 250px
}
在我看来，这不是一个好的选择，并且可能与 Material 指南背道而驰，但由于它没有以前版本中的所有功能，因此您应该做您认为最适合您的事情。
于 2016-11-22T15:24:21.563 回答
9
在 mat-dialog 上分享最新的实现此目的的两种方法... 1）您可以在打开期间设置宽度和高度，例如
let dialogRef = dialog.open(NwasNtdSelectorComponent, {
data: {
title: "NWAS NTD"
},
width: '600px',
height: '600px',
panelClass: 'epsSelectorPanel'
});
或 2) 使用panelClass并相应地设置它的样式。
1) 最简单，但 2) 更好，更可配置。
于 2018-03-09T01:40:27.757 回答
5
对于这篇文章的最新版本的 Angular，您似乎必须首先创建一个 MatDialogConfig 对象并将其作为第二个参数传递给 dialog.open()，因为 Typescript 期望第二个参数是 MatDialogConfig 类型。
const matDialogConfig = new MatDialogConfig();
matDialogConfig.width = "600px";
matDialogConfig.height = "480px";
this.dialog.open(MyDialogComponent, matDialogConfig);
于 2017-11-22T21:16:47.980 回答
3
我认为您需要使用/deep/，因为您的 CSS 可能看不到您的模态类。例如，如果您想自定义.modal-dialog
/deep/.modal-dialog {
width: 75% !important;
}
但是这段代码会修改你所有的模式窗口，更好的解决方案是
:host {
/deep/.modal-dialog {
width: 75% !important;
}
}
于 2017-11-29T15:41:37.497 回答
3
对话框组件.css
这段代码非常适合我，其他解决方案不起作用。使用 ::ng-deep 穿透阴影的后代组合器将样式强制通过子组件树向下进入所有子组件视图。::ng-deep 组合器适用于任何深度的嵌套组件，它适用于组件的视图子项和内容子项。
::ng-deep .mat-dialog-container {
height: 400px !important;
width: 400px !important;
}
于 2020-06-13T15:00:22.460 回答
2
这对我有用：
dialogRef.updateSize("300px", "300px");
于 2018-11-06T13:08:58.117 回答
1
在像笔记本电脑这样的小屏幕上，对话框会缩小。要自动修复，请尝试以下选项
附加阅读 https://material.angular.io/cdk/layout/overview
感谢answersicouldntfindanywhereelse（第2段）中的解决方案。它对我有用。
需要以下
从 '@angular/cdk/layout' 导入 { 断点，BreakpointObserver }
于 2019-12-23T14:19:23.670 回答
1
您还可以让角材料根据内容自行解决尺寸问题。这意味着您不必将 TS 文件的大小取决于您的 UI。您可以将这些保存在 HTML/CSS 中。
我的-dialog.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>
我的对话框.scss
.myContent {
width: 300px;
height: 150px;
}
我的组件.ts
const myInfo = {};
this.dialog.open(MyDialogComponent, { data: myInfo });
于 2019-08-09T13:09:21.160 回答