Ionic 3 - 带圆角的模态屏幕

Question

如何圆像这个链接的模态屏幕？

我的 CSS 代码是：

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

模态.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 方面的帮助

tks，

Answer 1

1. 在你的 css / scss 文件中创建一个 css：

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

2. 将 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

刚刚发布了ionic 4的解决方案：

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

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

Answer 3

如果你的页面被命名为“modal”，你可以尝试添加border-radius: 25px; 到 modal.scss 文件中的page-modal ：

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

它非常适合我：示例

Answer 4

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

谢谢