Как выровнять кнопки в блоке MdDialog md-dialog-actions

Question

В блоке md-dialog-actions MdDialog можно ли выровнять кнопку слева, если есть две кнопки, выровненные вправо?

Вот plnkr некоторых вещей, которые я пытаюсь сделать. Скажем, по первому модалу, как мне отделить кнопки «Да» и «Нет»? (См синфазного 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;}