Ionic 框架 6 中的模态调整大小

Question

我正在为我的应用程序使用 Ionic 框架 6 和 Angular 13。我想在此调整离子模态的大小。我试图在创建时传递一个全局 class 。它不工作。我试图调整包装 class 的大小。它在以前版本的 Ionic -5 中工作。但不是在这里。请帮忙。提前致谢。

commonService.ts

async createPopup(options) {
    options.componentProps.service = this;
    const ref = await this.modalController.create({
      component: AppModalPopupComponent,
      ...options
    });
    if (!this.modalPopup?.length) { this.modalPopup = []; }
    this.modalPopup.push(ref);
    ref.present();

    return ref;
  }


component.ts


this.modalService.createPopup(
      {
        backdropDismiss: true,
        componentProps: {
          header: 'Update Banner in My Queue',
          component: AppUpdateImagePopoverComponent
        },
        cssClass: "image-popup-modal-css"
      });```

Global.scss

.image-popup-modal-css {
  height: 100%;
  width: 100%;
  color: var(--app-secondary-color);
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.image-popup-modal-css .modal-wrapper {
  display: grid;
  grid-template-columns: auto;
  grid-auto-rows: minmax(min-content, max-content);
  height: 100%;
  border-radius: 10px;
  margin: 20px;
  position: absolute;
  top:0
}

Answer 1

在 ionic 5 中我使用了这个：

.example-modal {
  align-items: center;
  justify-content: center; 
  .modal-wrapper { 
    --height: 80%; 
    --width: 50%;   
  }
}

而在 Ionic 6 中我改成了这个

.example-modal {
  align-items: center;
  justify-content: center; 
  &::part(content){
    width: 80%;
    height: 50%; 
  }
}

Ionic 框架 6 中的模态调整大小

Modal Resize in Ionic framework 6

modal-dialog

ionic-framework

angular