如何在 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-root
为 open
时有效。
您可以查看此 article 以了解有关 shadow-root
DOM 的更多信息。
我是 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-root
为 open
时有效。
您可以查看此 article 以了解有关 shadow-root
DOM 的更多信息。