离子2如何改变模态高度和宽度

Question

我的应用程序上有一个页面，它有一个模态页面，我想更改该页面的大小，我尝试使用模型属性来更改它，但它会改变所有其他页面的大小，我想要拥有不同尺寸的不同型号

$modal-inset-min-width

Answer 1

如果你看到create的{​​{1}}内部方法，那就是：

ModalController

这是create(component: any, data?: any, opts?: ModalOptions): Modal; ：

ModalOptions

所以，只需在你的模态中添加一个类：

export interface ModalOptions {
    showBackdrop?: boolean;
    enableBackdropDismiss?: boolean;
    enterAnimation?: string;
    leaveAnimation?: string;
    cssClass?: string;
}

现在你可以通过let modal = this.mModalController.create("YourModalPage","Your data",{ cssClass: "my-modal" }) 类

为你的模态设置样式

Answer 2

将此添加到您的app.scss：

.my-modal {
    height: 50%!important;
    width: 50%!important;
} 

Answer 3

我使用建议的方法来启动高度为50％的模态，但我发现没有启用背景的问题。

//app.scss

.my-modal {
  height: 50%!important;
  transform: translateY(100%);
}

输出：

所以我最终得到了：

//app.scss

@include media-breakpoint-down(sm) {
.my-modal {
    ion-backdrop {
      visibility: visible !important;
    }
    .modal-wrapper {
      border-radius: 10px 10px 0px 0px;
      overflow: hidden;
      top: 50%;
      left: 0;
      position: absolute;
      width: 100%;
      height: 50%;
    }
  }
}

输出这些视图：

我使用断点mixin将模态行为保持在768+ px（平板电脑等）。

希望帮助某人。

Answer 4

将他的代码放入app.scss文件

modal-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
}

@media not all and (min-height: 600px) and (min-width: 768px) {
  ion-modal ion-backdrop {
    visibility: hidden;
  }
}

@media only screen and (min-height: 0px) and (min-width: 0px) {
  .modal-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

Answer 5

模式控制器采用自定义CSS

let moreInfoModal = this.modalCtrl.create(DesktopMoreInfoPage, {
  titles: title,
  images: image,
  description: description
}, {cssClass: 'custom-class'});
moreInfoModal.present();

然后在您的app.scss文件中

.custom-class {
//your styling goes here
}

Answer 6

自定义 css

ion-modal.my-modal {
  padding: 10vh 10vw;
}

自定义 ts

this.modalCtrl.create(pageName, {myParam:item}, { cssClass: 'my-modal' });