Question

我试图制作带有圆角的模式对话框。我对此进行了研究，并对我的代码进行了一些更改。代码如下。

information.scss

 ion-modal.infomation ion-backdrop {
    visibility: visible !important;
    z-index:0;
    overflow: hidden;
    }
   ion-modal.infomation .modal-wrapper{
       top: 10%;
       width:80%;
       height: 50%;
       position:absolute;
       left: 10%;
       border-radius: 25px !important;
       background: transparent !important;
   }
   ion-page.modal {
      background: rgba(0,0,0,0.5);
    }
   page-infomation{
    .content{
        background-size: cover;
        padding-bottom: 15px;
    }
    .logoimage{
        width: 100px;
        height: 100px;
    }
   }

information.html

<ion-content padding st #content>
    <div style="text-align: center">
      <img src="assets/imgs/gameicons/correct.png" style="width:70px;height: 70px;">
    </div> 
    <div style="text-align: center;margin-top: 20px">
      <p 
      *ngIf="!type"
      style="color: #000000;
                font-size:18px;
                font-family: Tecnico !important;
                line-height: 1.0;
                ">
                {{m_content}}
      </p>
      <img [src]="logoImg" alt="" class="logoimage" *ngIf="type && logoImg != null"/>
      <p *ngIf = "type && logoImg == null">Not Available</p>
    </div>
</ion-content>

它在浏览器和ios版本中均可完美运行。但是在android版本中，它显示的正方形未四舍五入。请帮助我如何解决该问题。

Answer 1

因此，您将把该类放在page标签之外，但要小心，因为如果您未在TS文件的modalCtrl中定义cssClass，则它可能会影响整个应用程序的模态。

导入模态选项，如下所示：

import { ModalController, ModalOptions } from 'ionic-angular';

在显示模式的函数内：

openModal() {
let data = {any data you would like to pass};
let options: ModalOptions = { cssClass: 'your-class' } 
let modal = this.modalCtrl.create(yourComponent, data, options); 
modal.present();
}

然后在您的scss文件中：

ion-page{
/*some styles*/
}

.your-class .modal-wrapper{
border-radius: 25px;
}

模式对话框的离子3边界半径在android中不起作用

1 个答案: