Question

如何围绕这样的模态屏幕link？

我的CSS代码是：

.modal {
   background: rgba(0, 0, 0, 0.5) !important;
   padding: 25% 15%  !important;
   display: block;
   border-radius: 25px;
 }

modal.html

   <ion-content>
     <div class="subtitulo">
       <h4>Select your city</h4>
     </div>

    <ion-list>
      <button ion-item *ngFor="let cidade of cidades" (click)="selCidade(cidade)" detail-none>
        <h3 text-wrap>{{ cidade.nome }}</h3>
        <ion-icon name="ios-arrow-forward" item-right></ion-icon>
      </button>
     </ion-list>
   </ion-content>

但是边界半径没有效果。我尝试了一些教程，但没有人有效。

我需要一些CSS帮助

韩国社交协会，

Answer 1

在您的css / scss文件中创建一个CSS：

   .square-modal .modal-wrapper { border-radius: 0px; }

使用CSS进行模型创建：

  async presentModal() {

    const modal = await this.modalCtrl.create({
      component: InvestorListPage,
      componentProps: { id: 5, name: 'gaurav' },
      cssClass: 'square-modal'
    });

    modal.onDidDismiss().then(result => {
      console.log(result.data);
    });

    return await modal.present();

  }

（已通过ionic4测试）

Answer 2

如果您的页面名为“模态”，则可以尝试在modal.scss文件的border-radius: 25px;中添加page-modal：

page-modal{
   border-radius: 25px;
}

对我来说很完美： example

Answer 3

您可以使用overflow: hidden。我希望它会起作用。

由于

Answer 4

只需发布离子4的解决方案：

在global.scss中，只需更改离子成分“ ion-modal”的scss变量

ion-modal {
  --border-radius: 8px!important;
}

Ionic 3 - 带圆角的模态屏幕

4 个答案: