如何在Dialog角材质内正确对齐按钮? [英] How to align button right inside Dialog angular material?

问题描述

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

I want align button right corner of the dialog below is my 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>

演示

推荐答案

您可以使用 align HTML属性:

You can use the align HTML attribute:

<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文件中的对话框动作:

Note: The reason why setting an align="end" attribute works on the dialog's actions container is because the align attribute is used to add flexbox properties to the dialog actions in the dialog component's theming SCSS file:

( dialog.scss 的摘录)

(Extract of dialog.scss)

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

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

这是源代码.

这篇关于如何在Dialog角材质内正确对齐按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！