您如何使用本機中的 ion-menu 為 ionic 中的側邊菜單制作圓角

Question

嗨，我到處研究並查看了 XCode，但還沒有弄清楚。 我想為我的 iOS 應用程序創建 venmo 風格的圓角，但 iOS 似乎不遵守我為其設置的 sass 規則。 側邊菜單樣式由從<ion-menu>標記生成的 div 類<div class='menu-inner'>...</div> 。

我的 sass 規則在瀏覽器上運行良好，但我驚訝地發現它不適用於本機生產，特別是 iOS。 這是我的 sass 規則。

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

這導致瀏覽器具有所需的結果。 在鉻檢查員

但是，在 XCode iOS 12.1 iPhone X 中會產生尖角邊緣。 iPhone X 模擬器

如何使用 ionic 3.0 在本機應用程序中使角變圓。

Answer 1

你可以用陰影部分來做。 在組件的 CSS 文件中，您可以像這樣指定它：

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

閱讀有關ShadowParts 的更多信息

Answer 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 屬性。

所有最好的編碼！

Answer 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);
  }

Answer 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

Answer 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