如何在MdDialog md-dialog-actions块中对齐按钮

Question

在MdDialog的md-dialog-actions块中,是否可以对齐左边的按钮,而右边有两个按钮？

这里有一个plnkr的一些东西,我想要做的事.比如说,在第一个模态中,如何分离是和否按钮？(参见common-model.component.ts文件)(这个plnkr还有其他一些问题,我还在研究它.但它不涉及这个问题.)

import { Component }   from '@angular/core';
import { MdDialogRef } from "@angular/material";

@Component({
    selector: 'common-modal',
    template: `
      <h2 md-dialog-title id="modal-title">{{ title }}</h2>
      <md-dialog-content>
        <p class="dialog-body" id="modal-message">{{ message }}</p>
      </md-dialog-content>
      <md-dialog-actions align="right">
        <button md-raised-button 
                md-dialog-close 
                id="modal-close-btn">
          {{ buttonOptions.closeText }}
        </button>
        <button md-raised-button 
                *ngIf="buttonOptions.enableNext" 
                id="modal-next-button"
                (click)="dialogRef.close(true)">
          {{ buttonOptions?.nextText }}
        </button>
      </md-dialog-actions>`,
})
export class CommonModalComponent {
    /**
     * {string} The text for the header or title of the dialog.
     */
    title: string;
    /**
     * {string} The text for the body or content of the dialog.
     */
    message: string;
    /**
     * closeText  {string}  The text of the close button. (No, Done, Cancel, etc)
     * nextText   {string}  The text of the confirming button. (Yes, Next, etc)
     * enableNext {boolean} True to show the next button. False to hide it.
     */
    buttonOptions: {
        closeText: string,
        nextText?: string,
        enableNext: boolean
    };


    constructor(public dialogRef: MdDialogRef<CommonModalComponent>) { }
}

Answer 1

您可以md-dialog-actions与单词align上可用的属性对齐Material 2.0.0-beta.2.如果您不是最新版本,请更新版本.您可以使用"end"或"center"对齐.

<md-dialog-actions align="end"> ... </md-dialog-action>

如果要单独对齐按钮,则需要自定义样式.使用按钮上的自定义样式也可以将它们分开(这可以在下一个材料版本中修复)

Answer 2

在这里回复可能为时已晚,但我对@PrazSam提供的解决方案有一些补充.希望能帮助到你 !您可以在按钮之间添加跨度,这将创建一个空白空间,并将前空格按钮对齐到左侧,将空格按钮对齐到对话框容器的右侧.如下所示:MdDialogHTML

<md-dialog-actions align="end">
<button md-button color="primary">+ MORE VARIANTS</button>
<span class="spacer"></span>
<button md-button color="primary">SAVE</button>
<button md-button color="warn" (click)="dialogRef.close()">CANCEL</button>

MdDialogCSS

.spacer {flex: 1 1 auto;}