离子2模态使宽度的50%
离子2模态使宽度的50%
提问于 2017-04-25 17:24:31
我在我的离子应用程序中有一个页面，点击一下按钮就会打开一个模态页面。目前，我已经覆盖了以下代码的variable.scss，以使模型覆盖页面的100%。
//for Modals
$modal-inset-height-large: 100%;
$modal-inset-height-small: $modal-inset-height-large;
$modal-inset-width: 100%;但是，这适用于我的应用程序中的所有模型。我想在其他页面中使用一些模型，这些模型使用50%的宽度和80%左右的高度。如何自定义我的控件？
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43606619
复制相关文章
相似问题
腾讯云开发者
