Ionic 3 - 带圆角的模态屏幕答案

【问题标题】：Ionic 3 - Modal screen with rounded cornersIonic 3 - 带圆角的模态屏幕
【发布时间】：2018-08-21 03:19:59
【问题描述】：

如何像 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 方面的帮助

Tks，

【问题讨论】：

您上面的代码应该可以正常工作。请更新您的问题，以便在minimal, complete, and verifiable example 中显示全部您的相关代码。如果您可以让我们知道您有什么tried so far 来解决您的问题，这也会很有帮助。如需更多信息，请参阅有关how to ask good questions 的帮助文章，并采取tour of the site :)
更新代码...模态html
检查一下forum.ionicframework.com/t/custom-modal-alert-with-html-form/…
modal.html 已更新。当我调用模态页面时，css被传递：
Utpaul，我已经试过这个页面上的代码了。

标签： css ionic-framework modal-dialog ionic3 modalviewcontroller

【解决方案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 测试）

【讨论】：

这有帮助。唯一的问题是 SCSS 样式应该写在 global.scss 文件中。您可以编辑您的帖子。 :) 我在 Ionic 4 中尝试过引用此 post。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

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

它非常适合我： example

【讨论】：

【解决方案4】：

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

谢谢

【讨论】：