Angular2 Material 对话框 css，对话框大小

Question

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

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

Answer 1

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

例如，.md-dialog-container是MDDialog的主类，内边距：24px

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

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

在我看来，这不是一个好的选择，并且可能违反 Material 指南，但由于它不具备以前版本中的所有功能，您应该按照自己认为最适合自己的方式进行操作.

Answer 2

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 3

我们可以使用两种方法来更改 angular material

中的 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()。它会自动更改对话框大小。

有关更多信息，请查看此 link https://material.angular.io/components/component/dialog

Answer 4

对于截至 post 的最新版本 Angular，您似乎必须首先创建一个 MatDialogConfig 对象并将其作为第二个参数传递给 dialog.open()，因为Typescript 要求第二个参数是 MatDialogConfig 类型。

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

Answer 5

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

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

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

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

Answer 6

在 mat-dialog 上分享最新消息实现这一目标的两种方法...... 1）要么你在打开期间设置宽度和高度例如

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

或 2) 使用 panelClass 并相应地设置样式。

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

Answer 7

对于当前版本的 Angular Material (6.4.7)，您可以使用自定义 class:

let dialogRef = dialog.open(UserProfileComponent, {
  panelClass: 'my-class'
});

现在把你的 class 放在全球某个地方（还不能在其他地方工作），例如在 styles.css:

.my-class .mat-dialog-container{
  height: 400px;
  width: 600px;
  border-radius: 10px;
  background: lightcyan;
  color: #039be5;
}

完成！

Answer 8

这对我有用：

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

Answer 9

也可以让angular material根据内容自己解决尺寸。这意味着您不必根据 UI 的大小来混淆 TS 文件。您可以将这些保存在 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>

我的-dialog.scss

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

我的-component.ts

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

Answer 10

在笔记本电脑等小屏幕上，对话框会缩小。要自动修复，请尝试以下选项

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

补充阅读 https://material.angular.io/cdk/layout/overview

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

需要以下内容

从'@angular/cdk/layout'

导入{Breakpoints, BreakpointObserver}

Answer 11

对话框-component.css

此代码非常适合我，其他解决方案均无效。使用 ::ng-deep shadow-piercing 后代组合器强制样式通过子组件树向下进入所有子组件视图。 ::ng-deep 组合器适用于任何深度的嵌套组件，它适用于组件的视图子项和内容子项。

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

Angular2 Material 对话框 css，对话框大小

Angular2 Material Dialog css, dialog size

css

angular

angular-material

angular-material2