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

问题描述

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

<p>你最喜欢的动物是什么?</p><mat-form-field><input matInput [(ngModel)]=data.animal"></mat-form-field>
<div mat-dialog-actions><button mat-button [mat-dialog-close]=data.animal";cdkFocusInitial>Ok

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

解决方案

您可以使用 align HTML 属性:

<p>你最喜欢的动物是什么?</p><mat-form-field><input matInput [(ngModel)]=data.animal"></mat-form-field>
<div mat-dialog-actions align="end"><button mat-button [mat-dialog-close]=data.animal";cdkFocusInitial>Ok

演示

---

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

(dialog.scss 的摘录)

.mat-dialog-actions {//...&[align='end'] {justify-content: flex-end;}&[align='center'] {对齐内容:居中；}}

这是源代码.

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>

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

解决方案

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>

Demo

---

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:

(Extract of dialog.scss)

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

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

Here's the source code.

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