如何在 ionic 中为侧边抽屉菜单制作圆角?

How you make rounded corners for side drawer menu in ionic?

我是 Ionic 的新手。我被困在侧边抽屉菜单的圆角上。如果可行,请给我一个解决方案,然后我接受你的回答这里有人对此有解决方案吗?提前致谢。这是我的代码。

.menu-inner {
   border-radius: 0px 50px 0px 0px !important;
}

在 Inspect element 中这是完美的工作,但在代码中不起作用 这里是屏幕短路

到目前为止,您无法使用 CSS 为 DOM 中的 shadow-root 元素设置样式。在某些情况下,CSS4 有助于样式化。但在这种情况下,这是行不通的。

因此,您可以使用 JavaScript 来设置 shadow-root 元素的样式。在这里您应该创建一个像 menuRadius 这样的简单方法,并按以下方式在 initializeApp 中调用它。

src/app/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 50px 0px 0px');
    }, 2000);
  }

请注意 使用 JavaScript 注入样式仅在 shadow-rootopen 时有效。

您可以查看此 article 以了解有关 shadow-root DOM 的更多信息。