Angular2材料对话框的CSS，对话框的大小

Angular2材料团队最近发布了MDDialog https://github.com/angular/material2/blob/master/src/lib/dialog/README.md Angular2材料对话框的CSS，对话框的大小

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

来源

2016-11-14 E Ma

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

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

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

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

在我看来，这不是一个很好的选择，可能会违背材质指南，但由于它没有它以前版本中的所有功能，因此您应该按照您认为最适合您的方式进行操作。

来源

2016-11-22 15:24:21

谢谢，我最终添加了一个DIV和样式。 –

这不适用于这个对话框 - https://material.angular.io/components/component/dialog ..更改不适用 – bukajcihaj

@bukajcihaj据我所知，角度材料的CSS类已经改变了一点，所以，就像我在我的回答中所说的那样，使用开发工具来查看哪些类应用于对话框并且覆盖它们。你也可以看下面的答案。 –

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

如果你想覆盖颜色等，使用埃尔默的技术，只是添加适当的CSS。

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

来源

2017-01-26 02:20:25

有两种方法，我们可以使用在改变你的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

来源

2017-05-29 07:25:19

有关最新版本的角，因为这帖子，看来你必须首先创建一个MatDialogConfig对象，并把它作为第二个参数来dialog.open（），因为Typescript期望第二个参数是MatDialogConfig类型。

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

来源

2017-11-22 21:16:47

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

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

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

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

来源

2017-11-29 15:41:37

共享上垫对话框 2种实现的方式获取最新这... 1）或者你在打开例如设置宽度和高度

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

或 2）使用panelClass和风格它相应。

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

来源

2018-03-09 01:40:27 erickyi2006

Angular2材料对话框的CSS，对话框的大小

回答

相关问题