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

Question

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

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

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

Answer 1

到目前为止，您无法使用 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-root 为 open 时有效。

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

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

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

css-position

ionic-framework