angular - 如何在对话框 Angular Material 内对齐按钮？

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>

Demo

---

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

(dialog.scss 的摘录)

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

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

这是 source code .