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

Question

我在我的应用程序中使用 Ionic 框架 6 和 Angular 13。我想调整其中离子模态的大小。我试图在创作的同时通过全球课程。它不起作用。我尝试调整包装类的大小。它在 Ionic -5 的早期版本中工作。但不在这里。请帮忙。提前致谢。

公共服务.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%; 
  }
}