Angular Material - Mat-Dialog - 改变背景模糊/变暗效果

Posted 2023-03-06

【中文标题】Angular Material - Mat-Dialog - 改变背景模糊/变暗效果

【英文标题】：Angular Material - Mat-Dialog - change background blur / darkening effect

【发布时间】：2019-08-02 06:55:37

【问题描述】：

你好，我心爱的社区，

将角度与角度材料结合使用。

使用默认配置打开材质对话框时，它会使背景变暗一点。现在我希望它是一个模糊的背景。我尝试使用 css 样式，但无法更改窗口的背景（无法在组件模板内获得正确的选择器）。

我浏览了文档，但那里什么也没有。我可以在样式上多玩一点，因为我确信可能有一些棘手的方法，但考虑到变暗效果已经开箱即用，我认为应该也应该有一个开箱即用的主题功能。你怎么看？

【参考方案1】：

我猜你错过了文档中的属性MatDialogConfig - backdropClass。

查看StackBlitz DEMO 获取简单示例

来自这个演示：

dialog-overview-example.ts:

openDialog(): void 
  const dialogRef = this.dialog.open(DialogOverviewExampleDialog, 
    width: '250px',
    data: name: this.name, animal: this.animal,
    backdropClass: 'backdropBackground' // This is the "wanted" line
  );

  dialogRef.afterClosed().subscribe(result => 
    console.log('The dialog was closed');
    this.animal = result;
  );

styles.css：

.backdropBackground 
  /* your css needs */

【讨论】：

谢谢@benschabatnoam，这正是我想要的。我不知道我怎么会在文档中错过它，它就在顶部。

我们可以使用这个类来使用不透明度制作背景模糊

@Darshantheerth 当然可以，我已经更新了 stackblitz 示例，向您展示如何使用正确的 css

【参考方案2】：

@benshabatnoam 给出的答案是绝对正确的，但文档还有另一个选项可以完全禁用背景。

hasBackdrop

这是一个例子：

https://stackblitz.com/edit/angular-ei9hdv

【参考方案3】：

您可以通过结合不透明度和模糊来获得不错的效果。这样做：

将backdropClass 添加到您的对话框选项中：

backdropClass: "bdrop"

这些规则到你的样式表中：

.bdrop 
    background-color: #bbbbbbf2;
    backdrop-filter: blur(4px);

演示：https://angular-blurred-dialog-backdrop-zdyvpc.stackblitz.io/

【参考方案4】：

您也可以在 styles.scss 中覆盖类 .mat-dialog-container

.mat-dialog-container 
  box-shadow: 0px 11px 15px -7px rgb(0 0 0 / 20%), 0px 24px 38px 3px rgb(0 0 0 / 14%), 0px 9px 46px 8px rgb(0 0 0 / 12%);
  background: #fff;
  color: black;