Question

当我更改角材2对话框示例时 https://stackblitz.com/angular/bydbkvrmyeb?file=app%2Fdialog-overview-example.ts 通过添加direction: 'rtl',

到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-overview-example-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

材质2 RTL对话框不在中心

1 个答案: