文章/答案/技术大牛

发布

问离子2模态使宽度的50%
EN

Stack Overflow用户

提问于 2017-04-25 17:24:31

回答 2查看 20.4K关注 0票数 8

我在我的离子应用程序中有一个页面，点击一下按钮就会打开一个模态页面。目前，我已经覆盖了以下代码的variable.scss，以使模型覆盖页面的100%。

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

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

ionic-framework

ionic2

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-04-25 19:50:20

您不能更改特定的模式高度或宽度。现在，我将描述一个我用来调整我的模式大小的解决方案。

确保所有模式的高度和宽度都应为100%。作为大屏幕设备的离子调整模式。这就是我在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%;
  }
}

现在在ion-content中我们做了两个div，并且ion-content的背景应该是透明的(参见main-view css类)。现在，一个div用于模式的背景，这将用作背景(参见overlay css类)。另一个div应该用于内容，我们将调整这个div的大小(参见modal-content css类).In示例我将高度调整为50%。下面给出了示例html和css代码，

page-about {
  .main-view{
    background: transparent;
  }
  .overlay {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: .5;
    background-color: #333;
  }
  .modal_content {
    position: absolute;
    top: calc(50% - (50%/2));
    left: 0;
    right: 0;
    width: 100%;
    height: 50%;
    padding: 10px;
    z-index: 100;
    margin: 0 auto;
    padding: 10px;
    color: #333;
    background: #e8e8e8;
    background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
    background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
    background: linear-gradient(to bottom, #fff 0%, #e8e8e8 100%);
    border-radius: 5px;
    box-shadow: 0 2px 3px rgba(51, 51, 51, .35);
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    overflow: hidden;
  }
}

<ion-content class="main-view">
  <div class="overlay" (click)="dismiss()"></div>
  <div class="modal_content">
    <h2>Welcome to Ionic!</h2>
    <p>
      This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI.
    </p>
    <p>
      Take a look at the <code>src/pages/</code> directory to add or change tabs, update any existing page or create new
      pages.
    </p>
  </div>
</ion-content>

这是模式的屏幕截图，

如果您希望模式内容应滚动，请按照 在中所述，将替换为C31

对于Ionic3，您需要从. comment

this is an excellent answer, just one thing from ionic3, .main-view{ background: transparent; } should be .content{ background: transparent; }

所有代码都取自 。我认为 repo会对你有所帮助。

票数 28

Stack Overflow用户

发布于 2018-05-17 22:00:57

我以前尝试过，但没有找到一种通用的方法来让通道按照我想要的方式运行。

所以我花了一点力气，用下面的全局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'占用其最大大小的

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

备注：

你可以用你选择的任何其他前缀(或者没有前缀)来更改前缀 my-。
你可以在上面的css中更改模式的最大宽度和高度代码，如果你觉得合适的话(我将两者都定义为70%，<>E135>在你的情况下宽度和高度将是50%和80%，上面的截图是在桌面浏览器中拍摄的，但模式更改也可以在移动/本机应用程序中使用离子(我在安卓中测试，而且它应该也能在iOS中工作)。

更新(2018-07-30)

关于模式的HTML代码：

1)与内部内容一样大或一样小的响应模式(单个div或divs、spans以及其他块和内联元素的层次结构应该可以做到)：

<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)。在这种情况下，任何离子页面都可以：

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43606619

复制

相似问题

问离子2模态使宽度的50%
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问离子2模态使宽度的50%EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问离子2模态使宽度的50%
EN