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

【问题标题】：angular 8 material dialog close button with X top right带 X 右上角的 Angular 8 材质对话框关闭按钮
【发布时间】：2020-01-28 18:45:19
【问题描述】：

我正在尝试让我的材质对话框在右上角有一个 X 按钮，但我在定位方面遇到了问题。

组件.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 只是左对齐而不是右上角。有什么建议吗？

更新，这是我添加flex后遇到的问题：

【问题讨论】：

标签： html css angular typescript angular-material

【解决方案1】：

<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

所以，请在dialogRef 中提及panelClass，如下所示，

this.dialog.open(DialogComponent, {
      width: '250px',
      panelClass: 'my-dialog',
..
..

这会产生以下结果，

【讨论】：

完美。我不得不使用“关闭”图像对其进行修改，并在按钮上添加了“tabindex='-1'”，但完美！
@Chris 但问题在于将“x”按钮放在右上角。关闭对话框从来都不是问题！
我们如何在对话框之外添加取消图标？

【解决方案2】：

使用mat-icon-button只需要给按钮添加下面的样式。

.close-button{
  float: right;
  top:-24px;
  right:-24px;
}

功能示例：

stackblitz

【讨论】：

我们如何在对话框之外添加取消图标？
@prasannakumarchebrolu 在这里查看openDialog2 方法app-component.ts 和.icon-outside 类的css 规则在这里dialog-component.css
这个答案也可以标记为已批准。谢谢！

【解决方案3】：

现在最简单的方法是：

<div mat-dialog-title class="dialog-title">
  <h2>Title</h2>
  <button mat-icon-button aria-label="close dialog" mat-dialog-close>
    <mat-icon>close</mat-icon>
  </button>
</div>

而对话框标题 css 是

.dialog-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

这适用于 Angular 8.0.0

【讨论】：

【解决方案4】：

您可以在标题中使用 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

【讨论】：

这会将按钮移动到与标题平行的右侧。按钮仍然是标题的高度，对话框仍然有巨大的填充和边距。这并不能解决问题。
我刚刚添加了一张图片，这样您就可以看到它对 flex 的作用。它会更高，但不会覆盖在对话框之上。

【解决方案5】：

您可以通过将一些 css 样式应用于 mat-icon 来实现这一点，您可以实现这一点。

Mat-dialog 如下所示。

<button mat-icon-button class="close-button" [mat-dialog-close]="true">
  <mat-icon class="close-icon" color="warn">close</mat-icon>
</button>
<h1 mat-dialog-title>Hi {{data.name}}</h1>
<div mat-dialog-content>
  <p>Hello World!</p>
</div>

添加以下css规则

// if you want to change the color of the icon
.material-icons.color_white {color: #ffffff;}
.close-button{
  float: right;
  top:-24px;
  right:-24px;
}

//if you want some css animation
.close-icon {
  transition: 1s ease-in-out;
}

.close-icon:hover {
  transform: rotate(180deg);
}

//To place the x mark outside of the container
::ng-deep .icon-outside .close-button{
  float: right;
  top:-52px;
  right:-52px;
}

::ng-deep .icon-outside .mat-dialog-container {
 overflow: unset
}

您的 mat-dialog 消费组件应如下所示

constructor(public dialog: MatDialog) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogComponent, {
      width: '250px',
      panelClass:'icon-outside',
      data: {name: 'your name'}
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    });
  }

添加自定义类icon-outside 很重要。

这将按预期更改您的代码。如果你想改变图标的颜色，将这两个类添加到 mat-icon material-icons & color_white

所以您的按钮将如下所示：

<button mat-icon-button class="close-button icon-outside" [mat-dialog-close]="true">
  <mat-icon class="close-icon material-icons color_white">close</mat-icon>
</button>

【讨论】：

【解决方案6】：

我更喜欢做这样的事情-

.html 文件

<button class="close" mat-button mat-dialog-title (click)="closeDialog()">X</button>

通过将 mat-dialog-title 赋予按钮，我确保它位于顶层，然后为它赋予自定义类，类似于

.css 文件

.close.mat-button {
    position: inherit;
    top: 0;
    right: 0;
    padding: 2px;
    line-height: 3px;
    min-width: auto;
  }

上面讨论的按钮和我的模态内容位于父 div 中，我将其显示为 flex 并用作 flex-direction: column

.dialog{
    display: flex;
    flex-direction: column;
}

.ts 文件

  closeDialog() {
    this.dialogRef.close();
  }```

【讨论】：

【解决方案7】：

在您的组件 HTML 文件中，在所有元素的顶部添加以下标记。

<div mat-dialog-title style="float: right; font-weight: 700; cursor: pointer;" (click)="close()">X</div>

在你的组件 TS 文件中添加如下关闭函数。

close(): void {
    this.dialogRef.close();
}

不要忘记在构造函数中包含 dialogRef 作为参数

constructor(public dialogRef: MatDialogRef<YourDialogComponent>) {}

【讨论】：

你可以使用 ×而不是 X 以获得更好的关闭图标视图。

【解决方案8】：

在我们的项目中，我使用 flex 和 css 进行了实现。

.html 文件

<div fxLayout="column">
    <div fxLayoutAlign="end">
        <button mat-icon-button color="primary" (click)="close()"><mat-icon>close</mat-icon></button>
    </div>
    <mat-card class="pd-2">
         ...  
    </mat-card>
</div>

.ts 文件

    openMinimumsModal( ) {
        const dialogRef = this.matDialog.open(OrderMinimumsComponent, {
            width: 'auto',
            panelClass: 'dialog-no-padding',
           data: { ... },
        });
        dialogRef.afterClosed().subscribe(() => {});
    }

    close(): void {
        this.dialogRef.close();
    }

.css 文件

    .dialog-no-padding .mat-dialog-container {
        padding: 0;
    }

    .pd-2 {
        padding: 0 20px 20px 20px !important;
    }

【讨论】：

【解决方案9】：

我刚刚遇到了同样的问题。我想出了一个使用浮点数的更简单的解决方案。这也将关闭的 X 与标题对齐，我觉得这在视觉上更令人愉悦。

HTML 文件：

<div>
  <h1 mat-dialog-title style="float: left">Dialog Title</h1>
  <span style="float: right" [mat-dialog-close]>X</span>
</div>

<div mat-dialog-content style="clear: both">
  ...
</div>

【讨论】：

【解决方案10】：

可能重复：49420069

没有 TypeScript 的关闭功能和按钮对齐。

HTML：

<button class="button-close" mat-button [mat-dialog-close]="true">X</button>

CSS：

.button-close {
    justify-self: right;
    font-size: 20px;
    border: none;
    height: 30px;
    background-color: #FFFFFF;
    outline: none;
    color: #c04747;
    
    &:hover {
        cursor: pointer;
    }
}

【讨论】：