Jak wyrównać przyciski w bloku MdDialog-dialog-akcje-akcje

Question

W bloku akcji MdDialog do md-dialogów, czy można wyrównać przycisk po lewej stronie, gdy są dwa przyciski wyrównane w prawo?

Oto niektóre z rzeczy, które próbuję wykonać. Powiedz, na pierwszym modalu, jak oddzielić przyciski Tak i Nie? (Zobacz plik common-model.component.ts) (To plnkr ma jakieś inne problemy na to, że wciąż pracuję dalej. Ale to nie wiąże się to pytanie.)

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

można wyrównać md-dialog-actions z atrybutem align, który jest dostępny Material 2.0.0-beta.2 na słowach. Zaktualizuj wersję, jeśli nie jesteś najnowszy. Do wyrównania można użyć wartości "end" lub "center".

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

Jeśli chcesz wyrównać przyciski pojedynczo, wymaga to zastosowania niestandardowych stylów. Użyj również niestandardowych stylów na przyciskach, aby je również rozdzielić (może to być naprawione w następnej wersji materiału)

Answer 2

Może być za późno na odpowiedź tutaj, ale mam kilka dodatków do rozwiązania dostarczonego przez @PrazSam. Mam nadzieję, że to pomoże ! Możesz dodać span pomiędzy przyciskami, które utworzą pustą przestrzeń i wyrównać przyciski przestrzeni wstępnej do lewej i przyciski spacji po prawej stronie kontenera okna dialogowego. coś jak poniżej: 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;}