您如何使用本机中的 ion-menu 为 ionic 中的侧边菜单制作圆角答案

【问题标题】：How do you make rounded corners for side menu in ionic using ion-menu in native您如何使用本机中的 ion-menu 为 ionic 中的侧边菜单制作圆角
【发布时间】：2019-04-12 13:34:30
【问题描述】：

您好，我到处研究并查看了 XCode，但还没有弄清楚。我想为我的 iOS 应用程序创建 venmo 风格的圆角，但 iOS 似乎不遵守我为它设置的 sass 规则。侧边菜单样式由 div 类<div class='menu-inner'>...</div> 控制，该类由<ion-menu> 标签生成。

我的 sass 规则在浏览器上运行良好，但我惊讶地发现它不适用于本机生产，特别是 iOS。这是我的 sass 规则。

.menu-inner {
  border-radius: 0 1.7rem 1.7rem 0!important;
}

这会在浏览器中产生所需的结果。 In chrome inspector

但是，在 XCode iOS 12.1 中，iPhone X 会导致锐角边缘。 iPhone X emulator

如何使用 ionic 3 在本机应用程序中制作圆角。

【问题讨论】：

您是否找到任何解决此问题的方法，请在此处分享您的答案。我的离子应用程序也有同样的问题。谢谢。
我还没有找到解决这个问题的正确方法，但我确实找到了一个解决方法，我将在此处发布答案
我找到了解决方案，我在这里发布了答案..

标签： html ios css ionic-framework ionic3

【解决方案1】：

你可以用阴影部分做到这一点。在组件的 CSS 文件中，您可以像这样指定它：

ion-menu::part(container) {
border-radius: 25px;
}

阅读更多关于ShadowParts

【讨论】：

这将是 ionic 4+ 中的方法

【解决方案2】：

虽然这不是这个问题的正确解决方案，但如果这是您真正想要的项目功能，我确实找到了一个创造性的工作。该解决方案包括简单地创建四个 div 框，然后将它们固定到 <ion-menu> 的角落。

这是代码。

`<ion-menu [content]="content" type="overlay">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
      <div style="background-color: blue;height: 10px;width: 10px;position: fixed;right: -1px;
top: 0;"></div>
      <div style="background-color: red;border-radius: 0 10px 0 0;height: 10px;width: 12px;position: fixed;right: 0;
top: 0;"></div>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>

    <div style="background-color: blue;height: 10px;width: 10px;position: fixed;right: -1px;
bottom: 0;"></div>
    <div style="background-color: red;border-radius: 0 0 10px 0;height: 10px;width: 12px;position: fixed;right: 0;
bottom: 0;"></div>
  </ion-content>

</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
`

然后最后将它们混合在一起以获得正确的外观和感觉，使其看起来好像是圆角。对我来说，我交换了red -> #f8f8f8 和blue -> #999 以融入背景，这给了我这个。

彻底解决了我的问题！然而，这不是应该的方式。一旦 ionic 编译到本机平台，我怀疑会覆盖border-radius 属性。

所有最好的编码！

【讨论】：

【解决方案3】：

将此代码添加到您的 app.component.ts 文件中它肯定会起作用：

initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      this.menuRadius(); // call menuRadius method
    });
  }
  menuRadius() {
    setTimeout(() => {
      document.querySelector('ion-menu').shadowRoot.querySelector('.menu-inner').setAttribute('style', 'border-radius:0px 30px 0px 0px');
    }, 2000);
  }

【讨论】：

【解决方案4】：

在这里工作

initializeApp() {
    this.platform.ready().then(() => {
        this.statusBar.styleDefault();
        this.splashScreen.hide();
        setTimeout(() => {
            document.querySelector('ion-menu').shadowRoot.querySelector('.menu-inner').setAttribute('style', 'border-radius:0px 60px 0px 0px');
      }, 2000);
    });
}

项目环境

   Ionic CLI                     : 5.4.6 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.5
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.1

【讨论】：

【解决方案5】：

最近我也不得不做一个类似的改变，让菜单角变圆，经过一些阅读我找到了一个简单的解决方案，

在您使用过 ion-menu 的 css 文件中添加以下代码

ion-menu::part(container) { 
    border-radius: 0 70px 0 0;
  }


This has to do with the Shadow dom.

Follow below link for more info

https://ionicframework.com/blog/customize-your-ionic-framework-app-with-css-shadow-parts/?_gl=1*1wk5td8*_ga*NDA3OTM3NDc2LjE2MTAzNjA2Nzk.*_ga_REH9TJF6KF*MTYyMjY2OTIwMC4xMTMuMS4xNjIyNjY5MzAwLjA.


Here is a snapshot of menu after above css implementation.


  [1]: https://i.stack.imgur.com/T2xsu.png

【讨论】：