我试图使我的材质对话框在右上角有一个X按钮,但我在定位上遇到问题。
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%);
}
X只是左对齐,而不是右对齐。建议?
更新,这是添加弹性后出现的问题:
您可以在标题处输入X
,然后输入display: flex
吗?这样,
<div mat-dialog-title class="flex-container">
<h1>Login</h1>
<button mat-button class="close-icon" [mat-dialog-close]="true">
<mat-icon>close</mat-icon>
</button>
</div>
<div mat-dialog-content>
...
...
</div>
FlexBox进行救援,
.flex-container { display: flex;}
侧面说明:您仍然可以使用fxLayout
代替.flex-container
<button class="close" mat-button (click)="onNoClick()">X</button>
<h1 mat-dialog-title>Login</h1>
<div mat-dialog-content>
...
...
</div>
CSS:(请以全局(styles.css形式提供,或以ViewEncapsulation.NONE
形式提供,否则这些样式将不受影响。)
.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;
}
注意,在CSS中,我们现在有了一个新的类.my-dialog
所以,请在下面的panelClass
中以dialogRef
的形式提及,
this.dialog.open(DialogComponent, {
width: '250px',
panelClass: 'my-dialog',
..
..
这将为我带来以下结果,