代码之家  ›  专栏  ›  技术社区  ›  Shift 'n Tab

父容器的全屏对话框

  •  0
  • Shift 'n Tab  · 技术社区  · 7 年前

    我在这里创建了一个演示,在一个div中打开一个对话框作为父容器。但是全屏覆盖了整个页面。是否可以将对话框的宽度和高度设置为与其父容器相同?

    .html文件

    <mat-toolbar color="primary">
      Angular Material 2 App
    </mat-toolbar>
    <div class="parent-container" fxLayout="row" fxLayoutAlign="center center" >
        <button (click)="openDialog()" mat-button>
          open dialog
        </button>
    </div>
    

    .ts文件

    openDialog() {
        const dialog_ref = this.dialog.open(EntryComponent, {
          panelClass: ['full-screen']
        });
    
        dialog_ref.afterClosed().subscribe(result => {});
    }
    

    .css文件

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

    DEMO

    1 回复  |  直到 7 年前
        1
  •  0
  •   G. Tranter    7 年前

    可以使用对父容器的引用将其宽度和高度传递给openDialog()函数,以便与一起使用对话框.打开(). 例如:

    <div #parent class="parent-container" fxLayout="row" fxLayoutAlign="center center" >
        <button (click)="openDialog(parent.clientWidth, parent.clientHeight)" mat-button>
            open dialog
        </button>
    </div>
    
    openDialog(width, height) {
        const dialog_ref = this.dialog.open(EntryComponent, {
            width: width + 'px',
            height: height + 'px'
        });
    
        dialog_ref.afterClosed().subscribe(result => {});
    }