如何使模态在 Ionic2 中变为全屏？

Question

这是我的模态代码：

    let modal = Modal.create(DailyReportPage);
    this.nav.present(modal);

它在 Phone 上运行良好，但在平板电脑上它看起来像这样：我想要的是让它看起来像这样：

Answer 1

我采用这种风格：

ion-modal {
    .modal-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
    }
}

Answer 2

你应该关注Modal

模态框是遍历用户当前页面的内容窗格。通常它用于做出选择或编辑项目。

所以如果你想显示全屏。我想你创建新页面并推送到它

this.nav.push(SamplePage, {item: item});

Answer 3

在您的 scss 文件中应用此样式

ion-modal {
    .modal-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
    } }

它应该在您的选择器之外。

例如：-

page-mymodal {
    //page CSS Codes
}
ion-modal {
    .modal-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
    } 
}

Answer 4

您可以覆盖文件 variables.css:

中的相关 Ionic Sass 变量

$modal-inset-width: 100%;
$modal-inset-height-large: 100%;

文档（当前版本是 3.9，但我将它与 3.7 一起使用）： http://ionicframework.com/docs/theming/overriding-ionic-variables/

如何使模态在 Ionic2 中变为全屏？

How Can I make modal to become full-screen in Ionic2?

typescript

ionic2

angular