Ionic 如何在同一页面调整模态离子？

sbdsn5lh 于 2022-12-16 发布在 Ionic

关注(0)|答案(2)|浏览(143)

对于我的反馈表应用程序的延续，我有另一个问题，如何调整一个模态，我知道有建议的答案在这里堆栈溢出，但似乎我不能适用于我的问题。
场景是，**反馈表（Modal1）**将在用户访问反馈表后显示，然后在用户提交反馈后，谢谢（Modal2）将显示。但我的问题是 Modal1 与 Modal2 的大小不同。我将如何仅自定义 Modal2 的大小。
我有一个global.scss的自定义类。这是用于统一的模态布局。但我只需要一个（1）小模态。我将如何自定义它为某个模态一样的布局谢谢模态？
谢谢

全局.scss

.my-custom-class .modal-wrapper {    
    --height: 90%;
    position: absolute; 
    top: 5%;
    --width: 90%;
    border-radius: 25px;
    display: block;
 }

反馈表模态1

谢谢你，Modal 2

.超文本标记语言

<ng-template #thanksContent>
  <ion-grid class=" ion-hide-lg-down">
    <ion-text class = "indent-left"><h2><b>Feedback submitted.</b></h2></ion-text>
      <img class = "center" src = "{{assistantThankyou|staticpath}}"/>   
  </ion-grid>
  </ng-template>

我尝试在html中添加<div class = ""modal-size>，但没有任何效果。
希望你能帮我。谢谢

ionic-framework

来源：https://stackoverflow.com/questions/65732799/how-to-resize-modal-in-same-page-in-ionic

2条答案

按热度按时间

lpwwtiir1#

如果您正在使用ionic ModalController创建模态，则只需应用您在global.scss文件中编写cssClass。
例如

const modalCtrl = await this.modalCtrl.create({
  component: modalComponent,
  cssClass: 'my-modal-class'
})

global.scss

.my-modal-class{
 .modal-wrapper{
  height: 30%;
  width: 90%;
  border-radius: 15px;
}}

赞(0）回复(0）举报 2022-12-16

8oomwypt2#

在Ionic 5的文档中，您的问题中的那个老例子对我不起作用。这是在Ionic 6中定位具有.modal-wrapper类的阴影部分的正确方法：

ion-modal.my-custom-class::part(content) {    
    --height: 90%;
    position: absolute; 
    top: 5%;
    --width: 90%;
    border-radius: 25px;
    display: block;
 }

赞(0）回复(0）举报 2022-12-16

我来回答

Ionic 如何在同一页面调整模态离子？

2条答案

相关问题

热门标签

最新问答