web-dev-qa-db-fra.com

Comment aligner le bouton juste à l'intérieur du matériau angulaire Dialog?

Je veux le bouton d'alignement le coin droit de la boîte de dialogue ci-dessous est mon HTML

<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions>

  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

démo

angularangular-materialangular-material2
2
user9450118

Réponse mise à jour (au 20 décembre 2018)

J'ai découvert que l'attribut align est utilisé pour ajouter des attributs CSS flexbox aux actions de dialogue dans le fichier SCSS de la composante de dialogue:

(extrait de dialog.scss) 

.mat-dialog-actions {
  // ...
  &[align='end'] {
    justify-content: flex-end;
  }

  &[align='center'] {
    justify-content: center;
  }
}

Voici les lignes du code source: Lines of SCSS

Réponse originale

Vous pouvez utiliser l'attribut HTML [align]:

<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions align="end">
  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

Démo

6
Edric

Puisque l'attribut alignn'est pas pris en charge dans HTML5 , vous devez utiliser ce CSS à la place:

.mat-dialog-actions {
    justify-content: flex-end;
}

C'est ce qui est fait en interne par Angular Matériau lorsque vous mettez align="end", vous pouvez inspecter l'élément pour le vérifier.

1
Maarti

Retirer 

{display: flex}

style pour la classe mat-dialog-actions 

0
Esco