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;}

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

2 个答案: