带有 X 右上角的 Angular 8 材质对话框关闭按钮 [英] angular 8 material dialog close button with X top right

问题描述

我试图让我的材质对话框在右上角有一个 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 材质对话框关闭按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！