带有X右上角的8角材质对话框关闭按钮

问题描述 投票:0回答:2

我试图使我的材质对话框在右上角有一个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只是左对齐,而不是右对齐。建议?

更新,这是添加弹性后出现的问题:

enter image description here

html css angular typescript angular-material
2个回答
0
投票

您可以在标题处输入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


0
投票
<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',
..
..

这将为我带来以下结果,

enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.