如何打开Md-dialog全屏angular4？

Question

我正在尝试使用配置传递一些属性值。但对话框无法全屏打开。

openTwigTemplate(): void {
  let config = new MdDialogConfig();
  config = {
    position: {
      top: '10px',
      right: '10px'
    },
    height: '98%',
    width: '100vw',
  };
  const dailog = this.dialog.open(TwigDialogComponent, config);
}

如何根据分辨率全屏打开对话框？

Answer 1

您可以将 panelClass 添加到对话框，然后将任何 css 应用到该特定对话框。

openTwigTemplate(): void {
  let config = new MdDialogConfig();
  config = {
    position: {
      top: '10px',
      right: '10px'
    },
    height: '98%',
    width: '100vw',
    panelClass: 'full-screen-modal',
  };
  const dailog = this.dialog.open(TwigDialogComponent, config);
}

创建 class:

.full-screen-modal .mat-dialog-container {
  max-width: none;
}

Answer 2

这对我有用

let dialogRef = this.dialog.open(CustomerGarageAddEditComponent, {
      maxWidth: '100vw',
      maxHeight: '100vh',
      height: '100%',
      width: '100%'
    });

来源

https://github.com/angular/material2/issues/9823

Answer 3

这对我有用：

openTwigTemplate(): void {
  const dialog = this.dialog.open(TwigDialogComponent, {
    disableClose: true,
    panelClass: ['full-screen-modal']
  });
}

风格sheet：

.full-screen-modal {
  max-width: unset !important;
  width: 100%;
  height: 100%;
  .mat-dialog-container {
    max-width: 100vw;
    max-height: 100vh;
    height: 100%;
    width: 100%;
    .mat-dialog-content {
      max-height: unset !important;
    }
  }
}

如何打开Md-dialog全屏angular4？

how to open Md-dialog full screen angular4?

mddialog

angular-material2

angular