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

时间:2017-09-13 10:04:14

标签: ionic-framework ionic2

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

$modal-inset-min-width

6 个答案:

答案 0 :(得分:2)

如果你看到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" })

为你的模态设置样式

答案 1 :(得分:2)

将此添加到您的app.scss

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

答案 2 :(得分:0)

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

//app.scss

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

输出:

enter image description here

所以我最终得到了:

//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%;
    }
  }
}

输出这些视图:

iPhone 6 cap iPad cap

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

希望帮助某人。

答案 3 :(得分:0)

将他的代码放入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%;
  }
}

答案 4 :(得分:0)

模式控制器采用自定义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
}

答案 5 :(得分:0)

自定义 css

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

自定义 ts

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