ionic-framework - Ionic 2 Modal 占宽度的 50%

Question

我的 ionic 应用程序中有一个页面，单击按钮会打开一个模态页面。目前，我已将 variable.scss 覆盖到下面的代码中，以使模型覆盖 100% 的页面。

//for Modals
$modal-inset-height-large: 100%;
$modal-inset-height-small: $modal-inset-height-large;
$modal-inset-width: 100%;

但是，这适用于我的应用程序中的所有模型。我想在其他页面中使用一些模型，这些模型使用 50% 的宽度和大约 80% 的高度。如何自定义控件？

Answer 1

我之前尝试过，但没有找到一种通用的方法来使模态按我想要的方式运行。

于是我挣扎了一下，达到了响应式模态 以及具有以下全局 scss 的其他类型的模态:

ion-modal {
    &.my-modal-inner {
        display: flex;
        align-items: center;
        justify-content: center;

        ion-backdrop {
            visibility: visible;
        }

        .modal-wrapper {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            overflow: auto;
            width: auto;
            height: auto;
            left: auto;
            top: auto;
            contain: content;

            max-width: 70%;
            max-height: 70%;

            border-radius: 2px;
            box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);

            > .ion-page {
                position: relative;
                display: block;
                width: auto;
                height: auto;
                contain: content;
                box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
            }
        }

        &.my-stretch {
            .modal-wrapper {
                overflow: hidden;
                width: 100%;
                height: 100%;

                > .ion-page {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

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

你可以有 响应式模态 这将具有使用 cssClass: 'my-modal-inner' 的内部内容的大小:



模态将占据最大宽度和高度的 70%(如上面的 CSS 中定义的) 当内容超过限制时 :



如果模态的内容 应该占据所有容器元素 (如带有 ion-content 的页面或组件)，它不适用于上述情况，因为模式假定容器应该具有其子级的大小，从而可能导致 不良行为 (模态将非常小，超过它应该):



相反，您可以定义模态 占据其最大尺寸与 cssClass: 'my-modal-inner my-stretch' :



如果您希望模态为 全面屏 ，即使在大型桌面浏览器中，您也可以使用 cssClass: 'my-fullscreen' :



备注:

您可以更改前缀 my-与您选择的任何其他前缀(或无前缀)。

您可以更改最大宽度和高度 上述css中的模态，如你所见(我将两者都定义为70%，在你的情况下，宽度和高度分别为50%和80% )。

上面的屏幕截图是在桌面浏览器中拍摄的，但模式更改也适用于带有 Ionic 的移动/ native 应用程序(我在 Android 中测试过，它也应该在 iOS 中工作)。

更新 (2018-07-30)

关于模态的 HTML 代码:

1) 与内部内容一样大或一样小的响应模式(单个 div 或 divs 的层次结构， spans 和其他 block 和内联元素应该这样做):

<div class="main">
    <div class="img-container">
        <img src="assets/img/main/icon.png" [alt]="APP_NAME">
    </div>
    <div class="info-container">
        <div class="app-name">{{ APP_NAME }}</div>
        <div class="app-version">Version {{ APP_VERSION }}</div>
        <div class="app-year">@{{ INITIAL_YEAR }}-{{ CURRENT_YEAR }} {{ APP_NAME }}</div>
        <div class="app-rights">All rights reserved</div>
    </div>
</div>

2) 模态将占据其最大尺寸(使用类 my-stretch )。在这种情况下，任何 ionic 页面都可以:

<ion-header>
    <ion-navbar>
        <ion-title>My Title</ion-title>
    </ion-navbar>
</ion-header>
<ion-content>
    <p> My content </p>
</ion-content>