如何在对话框角度材质内对齐按钮

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属性用于将弹性框属性添加到对话框组件的主题 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"时，您可以检查元素以检查这一点。

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

在没有打字脚本的情况下关闭功能和按钮对齐。

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

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

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

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

Answer 6

对于角度 15，您可以设置对齐内容： 弹性端：

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

或者在 css 中：

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

Answer 7

删除

{display: flex} 

类垫对话框操作的样式