Angular2 Material Dialog css，对话框大小

Posted 2023-03-06

技术标签:

【中文标题】Angular2 Material Dialog css，对话框大小【英文标题】：Angular2 Material Dialog css, dialog size 【发布时间】：2017-03-28 11:25:15 【问题描述】：

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

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

【问题讨论】：

【参考方案1】：

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

【讨论】：

有什么方法可以从对话框组件中找到当前的大小？【参考方案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)

【讨论】：

如果我想添加的不仅仅是高度和宽度怎么办？像边界半径或背景。我应该把这个 css 放在哪里？你可以添加相关的css，比如使用panelClass【参考方案3】：

使用当前版本的 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;

完成！

【讨论】：

如果您想更改某些对话框而不影响项目中的每个对话框，这是非常方便的解决方案。这是我在 Angular 7 + Material 7 中使用的方法。我有一个后续问题（如果我在任何地方都找不到答案，我会提出一个实际问题）：如何设置最大值对话框宽度，如果用户使用的是宽屏（显示器），但如果他们使用的是较小的视口（例如手机或纵向平板电脑），则不是？ @Ade 为此，您必须使用媒体breakpoints【参考方案4】：

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

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

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

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

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

【讨论】：

谢谢，我最终添加了一个 DIV 和样式。这不适用于此对话框 - material.angular.io/components/component/dialog .. 未应用更改 @bukajcihaj 据我所知，角度材料的 css 类发生了一些变化，因此，正如我在回答中所说，使用开发工具查看哪些类应用于对话框并覆盖它们.你也可以看看下面的答案。 @Elmer Dantas，谢谢，现在可以了。我对仅针对该组件而不是所有模态的模态样式感兴趣。我想现在唯一的方法是使用 MdDialogConfig 选项，尽管它还不包括填充。最近遇到了一个类似的问题，我无法获得特定的材质类来设置样式（即使具有特异性并使用 !important）。一些材质类具有 ViewRule.Blocked （或类似的东西），它基本上将样式封装到该组件，因此它忽略任何其他样式。诀窍是使用::ng-deep。例如，::ng-deep .mat-sidenav-container height: auto; 。仍在尝试理解这一点，但这个解决方案对我有用。【参考方案5】：

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

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

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

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

【讨论】：

@PrasadShinde 您必须将 CSS 类放入您的全局 Styles.css 文件中（如果您正在使用，则可能是 .scss）。 @PrasadShinde - 不用担心，直到我回复后我才发现您的评论是 6 个月前的，而您现在可能已经想到了！是的，但即使在这种情况下，也很少有人试图发表意见。【参考方案6】：

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

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

【讨论】：

【参考方案7】：

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

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

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

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

【讨论】：

对于 2018 年阅读本文的人，/deep 及其所有变体已弃用【参考方案8】：

dialog-component.css

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

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

【讨论】：

谢谢，我真的需要让我的对话框具有默认大小。不好的建议：::ng-deep、/deep/ 等等都被弃用了。如果你现在这样做，当他们真正删除它时，它会以泪水告终。如果变暗 % 则不起作用...【参考方案9】：

这对我有用：

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

【讨论】：

【参考方案10】：

您也可以让角材质根据内容自行解决大小问题。这意味着您不必将 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 );

【讨论】：

【参考方案11】：

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

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

【讨论】：

以上是关于Angular2 Material Dialog css，对话框大小的主要内容，如果未能解决你的问题，请参考以下文章

Angular2 Material：Angular 材质输入的自定义验证

Angular 5 / Material，如何在 Mat Dialog 中删除垂直滚动？

如何使 Material-UI Dialog 在 React 中工作

ReactJS + Material-UI：如何在每个 TableRow 中使用 Material-UI 的 FlatButton 和 Dialog？

如何将 Material-table 与 Material-UI Dialog 结合起来？（反应JS）

Angular2 Material SnackBar 集成问题