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

【问题标题】：How you make rounded corners for side drawer menu in ionic?您如何在 ionic 中为侧抽屉菜单制作圆角？
【发布时间】：2019-11-14 19:21:04
【问题描述】：

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

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

在 Inspect 元素中这是完美的工作，但不能在代码中工作这是屏幕短

【问题讨论】：

标签： ionic-framework css-position

【解决方案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);
  }

请注意仅当shadow-root 为open 时，使用JavaScript 注入样式才有效。

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

【讨论】：