本文介绍了带有 X 右上角的 Angular 8 材质对话框关闭按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图让我的材质对话框在右上角有一个 X 按钮，但我在定位时遇到了问题.
component.ts
this.d.open(loginComponent, {宽度:'300px'，高度: ''，panelClass: 'dialogC',});
component.html
<button mat-button class="close-icon" [mat-dialog-close]="true"><mat-icon>关闭</mat-icon><h2 mat-dialog-title>登录</h2>
style.scss
.dialogC {位置:相对！重要；}.close-icon {位置:绝对；顶部:0；右:0；变换:翻译(50%，-50%)；}
X 刚好与左侧对齐，而不是与右上角对齐.建议?
更新，这是我添加flex后遇到的问题:
解决方案
X</button><h1 mat-dialog-title>登录</h1><div mat-dialog-content>......
CSS:(请在全局 (styles.css) 中提供或提供 ViewEncapsulation.NONE 否则这些样式不会影响.)
.cdk-overlay-pane.my-dialog {位置:相对！重要；}.close.mat-button {位置:绝对；顶部:0；右:0；填充:5px；行高:14px；最小宽度:自动；}
请注意，在 CSS 中，我们现在凭空创建了一个新类 .my-dialog
因此，请在 dialogRef 中将其作为 panelClass 提及，如下所示，
this.dialog.open(DialogComponent, {宽度:'250px'，panelClass: '我的对话',....
这产生了以下结果，
I am trying to get my material dialog to have an X button at the top right, but I am having problems with the positioning.
component.ts
this.d.open(loginComponent, {
width: '300px',
height: '',
panelClass: 'dialogC',
});
component.html
<mat-dialog-content>
<button mat-button class="close-icon" [mat-dialog-close]="true">
<mat-icon>close</mat-icon>
</button>
<h2 mat-dialog-title>Login</h2>
style.scss
.dialogC {
position: relative !important;
}
.close-icon {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
}
The X is just aligned to the left instead of top right. Suggestions?
Update, this is the problem I get after adding flex:
解决方案
<button class="close" mat-button (click)="onNoClick()">X</button>
<h1 mat-dialog-title>Login</h1>
<div mat-dialog-content>
...
...
</div>
CSS: (Please give it in global (styles.css) or give ViewEncapsulation.NONE or else these styles wont affect.)
.cdk-overlay-pane.my-dialog {
position: relative!important;
}
.close.mat-button {
position: absolute;
top: 0;
right: 0;
padding: 5px;
line-height: 14px;
min-width: auto;
}
Note that in the CSS We now have a new class out of thin air .my-dialog
So, please mention that as panelClass in dialogRef like below,
this.dialog.open(DialogComponent, {
width: '250px',
panelClass: 'my-dialog',
..
..
This yields me the following result,
这篇关于带有 X 右上角的 Angular 8 材质对话框关闭按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
