eth*_*han 23 css angular-material angular-material2 angular
Angular2材料团队最近发布了MDDialog https://github.com/angular/material2/blob/master/src/lib/dialog/README.md
我想改变angular2材质对话框的外观和感觉.例如,要更改弹出容器的固定大小并使其可滚动,请更改背景颜色,以此类推.最好的方法是什么？有没有我可以玩的CSS？
Ale*_*lor 36
内容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.
请注意,您必须<!DOCTYPE html>在页面上使用HTML 5 来确定对话框的大小以正确拟合内容(https://github.com/angular/material2/issues/2351)
Ami*_*mar 32
我们可以使用两种方法来改变角度材质中MdDialog组件的大小
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
Kos*_*nis 18
使用当前版本的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;
}
完成!
Elm*_*tas 13
您可以使用dev工具检查dialog元素,并查看mdDialog上应用的类.
例如,.md-dialog-container是MDDialog的主要classe并且有填充:24px
您可以创建自定义CSS来覆盖您想要的任何内容
.md-dialog-container
在我看来,这不是一个好的选择,可能违反材料指南但由于它没有它在之前版本中的所有功能,你应该做你认为最适合你的.
在 mat-dialog 上分享最新的两种实现方式... 1）要么在打开时设置宽度和高度，例如
let dialogRef = dialog.open(NwasNtdSelectorComponent, {
data: {
title: "NWAS NTD"
},
width: '600px',
height: '600px',
panelClass: 'epsSelectorPanel'
});
或 2) 使用panelClass并相应地设置样式。
1) 最简单，但 2) 更好，更可配置。
对于本文中最新版本的 Angular，您似乎必须首先创建一个 MatDialogConfig 对象并将其作为第二个参数传递给 dialog.open()，因为 Typescript 期望第二个参数的类型为 MatDialogConfig。
const matDialogConfig = new MatDialogConfig();
matDialogConfig.width = "600px";
matDialogConfig.height = "480px";
this.dialog.open(MyDialogComponent, matDialogConfig);
小智 5
对话框组件.css
这段代码对我来说非常有效，其他解决方案不起作用。使用 ::ng-deep 阴影穿透后代组合器强制样式通过子组件树向下进入所有子组件视图。::ng-deep 组合器适用于任何深度的嵌套组件，并且它适用于组件的视图子级和内容子级。
::ng-deep .mat-dialog-container {
height: 400px !important;
width: 400px !important;
}