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

Question

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

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

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

Answer 1

到目前为止，您无法设置样式 shadow-root DOM 中的元素使用 CSS。在某些情况下，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 注入(inject)样式仅适用于 shadow-root是 open .

您可以查看此 article更多信息 shadow-root DOM。