Angular2 Material Dialog css，对话框大小

Question

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

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

原文由 ethan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用开发工具检查对话框元素并查看 mdDialog 上应用了哪些类。

例如， .md-dialog-container 是 MDDialog 的主要类并且有 padding: 24px

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

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

在我看来，这不是一个好的选择，并且可能与 Material 指南背道而驰，但由于它没有以前版本中的所有功能，因此您应该做您认为最适合您的事情。

原文由 Elmer Dantas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

原文由 Amit kumar 发布，翻译遵循 CC BY-SA 4.0 许可协议