Question

Angular2材料团队最近发布了MDDialog https://github.com/angular/material2/blob/master/src/lib/dialog/README.md

我想改变angular2材质对话框的外观和感觉。例如，要更改弹出容器的固定大小并使其可滚动，请更改背景颜色，以此类推。最好的方法是什么？我可以玩一个css吗？

Answer 1

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。

请注意，您的页面上必须包含HTML 5 <!DOCTYPE html>，以确保对话框的大小能够正确拟合内容（https://github.com/angular/material2/issues/2351）

Answer 2

我们可以使用两种方法来改变角度材质中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

Answer 3

您可以使用开发工具检查对话框元素，并查看在mdDialog上应用的类。

例如，.md-dialog-container是MDDialog的主要classe并且有填充：24px

您可以创建自定义CSS以覆盖您想要的任何内容

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

在我看来，这不是一个好的选择，可能违反了材料指南，但由于它没有它在之前版本中的所有功能，你应该做你认为最适合你的。

Answer 4

在当前版本的Angular Material（6.4.7）中，您可以使用自定义类：

.userAccountNavigation div:nth-of-type(2) ul li:nth-child(2):before {
content: 'x';
}

现在将您的课程放在全球某个地方（无法在其他地方进行此工作），例如在let dialogRef = dialog.open(UserProfileComponent, { panelClass: 'my-class' });中：

styles.css

完成！

Answer 5

对于本文最新版本的Angular，似乎必须首先创建一个MatDialogConfig对象并将其作为第二个参数传递给dialog.open（），因为Typescript期望第二个参数的类型为MatDialogConfig。 / p>

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

Answer 6

我认为你需要使用/deep/，因为你的CSS可能看不到你的模态类。例如，如果您要自定义.modal-dialog

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

但是这段代码会修改你所有的模态窗口，更好的解决方案是

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

Answer 7

dialog-component.css

此代码对我来说非常有效，其他解决方案不起作用。使用:: ng-deep-shadow-piercing后代组合器将样式向下强制通过子组件树进入所有子组件视图。 :: ng-deep组合器适用于嵌套组件的任何深度，并且适用于该组件的视图子级和内容子级。

 ::ng-deep .mat-dialog-container {
    height: 400px !important;
    width: 400px !important;
}

Answer 8

分享最新的mat-dialog 实现这一目标的两种方式...... 1）要么在打开时设置宽度和高度例如

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

或 2）使用panelClass并相应地设置它。

1）最简单，但2）更好，更可配置。

Answer 9

在像笔记本电脑这样的较小屏幕上，对话框将缩小。要自动修复，请尝试以下选项

http://answersicouldntfindanywhereelse.blogspot.com/2018/05/angular-material-full-size-dialog-on.html

其他阅读 https://material.angular.io/cdk/layout/overview

感谢answericouldntfindanywhereelse（第2段）中的解决方案。它对我有用。

需要进行以下操作

从'@ angular / cdk / layout'导入{Breakpoints，BreakpointObserver}

Answer 10

这对我有用：

dialogRef.updateSize("300px", "300px");

Answer 11

您还可以根据实际情况，使角形材料自己解决尺寸问题。这意味着您不必使TS文件的大小取决于UI的大小。您可以将它们保留在HTML / CSS中。

my-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>

my-dialog.scss

.myContent {
    width: 300px;
    height: 150px;
}

my-component.ts

const myInfo = {};
this.dialog.open(MyDialogComponent, { data: myInfo });

Angular2材质对话框css，对话框大小

11 个答案: