如何在对话框角材料内对齐按钮？答案

【问题标题】：How to align button right inside Dialog angular material?如何在对话框角材料内对齐按钮？
【发布时间】：2018-08-31 09:12:40
【问题描述】：

我要对齐按钮下面对话框的右上角是我的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>

【问题讨论】：

标签： angular angular-material angular-material2

【解决方案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 属性用于将弹性框属性添加到对话框组件的主题 SCSS 文件中的对话框动作：

（dialog.scss 的摘录）

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

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

这是source code。

【讨论】：

由于 align 属性是 not supported in HTML5，请查看 my answer 以获得等效的 CSS。
我已经更新了答案以注意 align 属性的实际作用。（编辑：没有看到下面的答案！）
呃。为什么他们不使用@Input() 定义对齐，而是向其中添加正确的类？然后可能的值将被记录下来，并且不会在我的编辑器中标记为错误。

【解决方案2】：

由于align 属性is not supported in HTML5，你应该改用这个CSS：

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

当您输入align="end" 时，这是 Angular Material 在内部完成的，您可以检查元素以进行检查。

【讨论】：

这应该是正确的答案，lints 可以看出属性“align”已被弃用。

【解决方案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;
}

【讨论】：

【解决方案4】：

我想我来晚了，但无论如何。
你可以使用float样式属性：

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

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

【讨论】：

【解决方案5】：

删除

{display: flex}

类 mat-dialog-actions 的样式

【讨论】：

如果我去移除 {display: flex} 会有多个弹出窗口，一切都会顺利。因为这个特殊的弹出按钮需要在右上角

【解决方案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;
    }
}

【讨论】：