angular - 如何对齐 MdDialog md-dialog-actions block 中的按钮

Question

在MdDialog的md-dialog-actions block 中，是否可以将一个按钮左对齐，同时有两个按钮右对齐？

这是一个 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>

如果你想单独对齐按钮，则需要自定义样式。在按钮上使用自定义样式也可以将它们分开(这可能会在下一个 Material 版本中修复)