时间戳

首页 > 解决方案 > 如何在较小的屏幕上调整 MAT DIALOG 的大小

css - 如何在较小的屏幕上调整 MAT DIALOG 的大小

问题描述

这是我的 component.html 文件：

<div class="button">
  <button (click)="openPopUp()" mat-button class="readBtn">Buy Now</button>
</div>

这就是它的.ts文件。

openPopUp() {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.width="60%";
    this.dialog.open(GetBuyDetailsComponent, dialogConfig);
}

单击按钮时，我将打开名为GetBuyDetails的 Mat 对话框。但是这个 GetBuyDetails Pop-up 或 Mat Dialog 没有响应，因为它的宽度总是60%。如何使 Mat Dialog 组件具有响应性。

标签： cssangulartypescriptangular-material

解决方案

好的，据我了解，您有两个解决方案。

根据文档，您有两种选择 - 您必须决定哪一种更适合您。

1. 覆盖panelClass对话框。

这很容易实现，您可以将样式存储在组件目录中，解决方案如下：

组件样式.scss

        ::ng-deep .my-custom-panel {
          width: 70%;
        
    // your custom logic - this is a sketch
          @media screen and (max-width: 660px){
            width: 100%;
          }
        }

.component.ts

      openPopUp() {
        this.dialog.open(<your component>, {
          disableClose: true,
          autoFocus: true,
          panelClass: 'my-custom-panel'
        });
      }

这里的主要问题是您不能将样式范围限定为组件，每种.my-custom-panel样式都将被全局覆盖。

2.为此使用全局样式

可能会更好一些，但是您必须在全局styles.(s)css中定义您的覆盖类，您应该在其中不使用::ng-deep修饰符。从那时起，您可以简单地遵循前面的逻辑。

我将明确地选择第二个，因为Angular 不推荐::ng-deep使用不带任何修饰符（例如:host）的使用，这是一个不太好的解决方案。

希望这对您有所帮助，如果您有任何问题，请发表评论。

推荐阅读