Ionic 离子框架中的模态调整6

ecbunoof  于 2022-12-09  发布在  Ionic
关注(0)|答案(2)|浏览(167)

我在我的应用程序中使用Ionic frame work 6和Angular 13。我想在此调整离子模态的大小。我试图在创建沿着传递一个全局类。它不起作用。我试图调整 Package 类的大小。它在以前版本的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
}
qc6wkl3g

qc6wkl3g1#

在ionic 5中,我使用了以下代码:

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

在爱奥尼亚音乐6中我改成了这个

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

yyhrrdl82#

所有版本都很好

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

相关问题