диалог материалов 2 RTL не по центру

Question

Когда я изменяю пример диалогового окна угловой материал 2 https://stackblitz.com/angular/bydbkvrmyeb?file=app%2Fdialog-overview-example.ts в RTL добавив direction: 'rtl',

const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      direction: 'rtl',
      data: {name: this.name, animal: this.animal}
    });

всплывающее окно больше не находится в центре страницы

Answer 1

Тег направления предназначен для макета. Это означает, что модал будет заложен таким образом. Пожалуйста, проверьте ссылку ниже и найдите тег direction.

https://material.angular.io/components/dialog/api

Однако, если вы хотите иметь направление в своем HTML, вы можете применить CSS и указать желаемое направление, как показано ниже: -

Диалог-обзор-пример-dialog.html

<div style="direction: rtl;">
  <h1 mat-dialog-title>Hi {{data.name}}</h1>
  <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 (click)="onNoClick()">No Thanks</button>
    <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
  </div>
</div>

Вы можете проверить работающий пример для справки.

https://stackblitz.com/edit/angular-syrsnb?file=app/dialog-overview-example-dialog.html