如何在 Dialog angular 材料中对齐按钮？

Question

我想要下面对话框右上角的对齐按钮是我的 html

<div mat-dialog-content>
    <p>What's your favorite animal?</p>
    <mat-form-field>
        <input matInput [(ngModel)]="data.animal">
    </mat-form-field>
</div>
<div mat-dialog-actions>

    <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

<a href="https://stackblitz.com/edit/angular-ksmixt?file=app/dialog-overview-example-dialog.html">demo</a>

Answer 1

您可以使用align HTML 属性：

<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions align="end">
  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

演示

---

注意：设置align="end"属性对对话框的动作容器起作用的原因是因为align属性用于将 flexbox 属性添加到对话框组件的主题 SCSS 文件中的对话框动作：

（ dialog.scss ）

.mat-dialog-actions {
  // ...
  &[align='end'] {
    justify-content: flex-end;
  }

  &[align='center'] {
    justify-content: center;
  }
}

这是源代码。

Answer 2

由于HTML5 不支持align属性，因此您应该改用此 CSS：

.mat-dialog-actions {
    justify-content: flex-end;
}

当您放置align="end" ，这是 Angular Material 在内部完成的操作，您可以检查元素以进行检查。

Answer 3

使用作为材料一部分的内置工具栏。

<h4 mat-dialog-title>
        <mat-toolbar role="toolbar" class="task-header">
            <span> Edit Task</span>
            <span class="fx-spacer"></span>
            <button mat-icon-button (click)="close()">
                <mat-icon mat-list-icon>close</mat-icon>
            </button>
        </mat-toolbar>
    </h4>
    <div mat-dialog-content>
    Modal Content here
    </div>

标题的自定义 CSS

.task-header {
    background-color: transparent;
    padding: 0 5px;
    height: 20px;
}
.fx-spacer {
    flex: 1 1 auto;
}

Answer 4

猜猜我有点晚了，但无论如何。
您可以使用float样式属性：

  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial style="float: left;">Ok</button>

我使用了内联样式以便于演示
但我不建议为您的项目使用内联样式。
改用单独的样式表

Answer 5

移除

{display: flex} 

类 mat-dialog-actions 的样式

Answer 6

在没有 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;
    }
}

Answer 7

对于 angular 15 你可以设置 justify-content: flex-end:

<div mat-dialog-actions style="justify-content: flex-end">

或者在 css：

  .mat-mdc-dialog-actions {
      justify-content: flex-end;
    }