Question

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

更新，这是添加flex之后出现的问题：

Answer 1

使用只需在按钮上添加以下样式。

mat-icon-button

功能示例：

stackblitz

Answer 2

现在最简单的方法是：

<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

Answer 3

<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',
..
..

这给我带来以下结果，

Answer 4

我更喜欢做这样的事情-

.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();
  }```

Answer 5

您可以通过将某些CSS样式应用于mat-icon来实现此目的，

垫子对话框如下所示。

<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>

Answer 6

在我们的项目中，我使用 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;
    }

Answer 7

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

Answer 8

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

result = {}
for v in payload["data"].values():
    result[v["name"]] = v["url"]

print(result)

在组件TS文件中，按如下所示添加关闭功能。

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

别忘了将dialogRef包含在构造函数中作为参数

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

Answer 9

可能的重复项：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;
    }
}

角度8材质对话框关闭按钮，右上角为X

9 个答案: