时间戳

首页 > 解决方案 > 如何根据 matdialog 的角度调整 matdialog 内容的大小？

angular - 如何根据 matdialog 的角度调整 matdialog 内容的大小？

问题描述

我已经调整了我的垫子对话框的大小，但内容仍然是指原始大小。所以这里有一些照片。

MatDialog

我搜索了它，他们说它可以通过使用 css 调整大小。所以我尝试了这个。

 ngOnInit() {
    this.dialogRef.updateSize('60%', '60%');
} //MatDialogComponent Custom Size


 <mat-dialog-content class="many-inputs" style="height:fit-content; width: fit-content;">
<div class="input-container">
       <h2>{{model.name}}</h2>
</div>

<div class="input-container" *ngFor="let category of model.categories">
  <h2>{{category}}</h2>
  <h2 *ngIf="category=='System'">{{model.domains[0]}}</h2>
  <h2 *ngIf="category=='Web'">{{model.domains[1]}}</h2>
  <h2 *ngIf="category=='Mobile'">{{model.domains[2]}}</h2>
 <permissionProject-manager [data]="model" [category]="category" [customers]="data.customers" [allProjects]="data.allProjects" formControlName="permissions"></permissionProject-manager>
  
</div>

尺寸确实发生了变化，但不合适。有没有办法让它们完全符合垫子对话框的大小？另一种方法是使用 px 手动调整宽度和高度，但我担心屏幕尺寸不同的人会有不同的查看结果。

标签： angulartypescriptangular-material

解决方案

您可以通过在 panelClass 中应用 css 类来调整对话框的大小：

import { MatDialog } from '@angular/material/dialog';    

constuctor(public dialog: MatDialog){}

ngOnInit() {
 this.dialog
  .open(SomeDialogComponent, {
    panelClass: ['w-11/12', 'md:w-7/12', 'xl:w-5/12', '2xl:w-3/12'],
  })
  .beforeClosed()
  .subscribe((result: string) => {}
}

推荐阅读