Html 如何使用本机中的ion菜单为ionic中的侧菜单创建圆角
嗨,我到处都在研究XCode,但还没弄明白。我想为我的iOS应用程序创建venmo风格的圆角,但iOS似乎不遵守我为其设置的sass规则。 侧菜单样式由div类Html 如何使用本机中的ion菜单为ionic中的侧菜单创建圆角,html,ios,css,ionic-framework,ionic3,Html,Ios,Css,Ionic Framework,Ionic3,嗨,我到处都在研究XCode,但还没弄明白。我想为我的iOS应用程序创建venmo风格的圆角,但iOS似乎不遵守我为其设置的sass规则。 侧菜单样式由div类..控制,该类由标记生成 我的sass规则在浏览器上运行得很好,但我惊讶地发现它在本机产品(特别是iOS)中不起作用。这是我的sass规则 .menu-inner { border-radius: 0 1.7rem 1.7rem 0!important; } 从而在浏览器中显示所需的结果。 然而,在XCode iOS 12.1中,
..
控制,该类由
标记生成
我的sass规则在浏览器上运行得很好,但我惊讶地发现它在本机产品(特别是iOS)中不起作用。这是我的sass规则
.menu-inner {
border-radius: 0 1.7rem 1.7rem 0!important;
}
从而在浏览器中显示所需的结果。
然而,在XCode iOS 12.1中,iPhoneX会产生尖锐的棱角。
如何使用ionic 3在本机应用程序中圆角。虽然这不是解决此问题的正确方法,但如果这是您真正想要的项目功能,我确实找到了一个创造性的解决方法。解决方案只需创建四个div框,然后将它们固定到
的角落
这是代码
`<ion-menu [content]="content" type="overlay">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
<div style="background-color: blue;height: 10px;width: 10px;position: fixed;right: -1px;
top: 0;"></div>
<div style="background-color: red;border-radius: 0 10px 0 0;height: 10px;width: 12px;position: fixed;right: 0;
top: 0;"></div>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
<div style="background-color: blue;height: 10px;width: 10px;position: fixed;right: -1px;
bottom: 0;"></div>
<div style="background-color: red;border-radius: 0 0 10px 0;height: 10px;width: 12px;position: fixed;right: 0;
bottom: 0;"></div>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
`
`
菜单
{{p.title}}
`
然后最后将它们混合在一起,以获得正确的外观和感觉,使其看起来像是圆角。对我来说,我把红色->#f8f8
和蓝色->#999
混合到背景中,这给了我这个。
完全解决了我的问题!然而,这不是它应该的方式。我怀疑一旦ionic编译到本机平台,就会重写border radius属性
所有最好的编码 将此代码添加到你的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 30px 0px 0px');
}, 2000);
}
它在这里工作
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
setTimeout(() => {
document.querySelector('ion-menu').shadowRoot.querySelector('.menu-inner').setAttribute('style', 'border-radius:0px 60px 0px 0px');
}, 2000);
});
}
项目环境
Ionic CLI : 5.4.6 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.11.5
@angular-devkit/build-angular : 0.801.3
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.1.1
你可以用阴影部分。 在组件的CSS文件中,您可以指定如下内容:
ion-menu::part(container) {
border-radius: 25px;
}
阅读更多关于最近我也做了类似的改变,使菜单角变圆,经过一些阅读后,我找到了一个简单的解决方案 在您使用过ion菜单的css文件中添加以下代码
ion-menu::part(container) {
border-radius: 0 70px 0 0;
}
This has to do with the Shadow dom.
Follow below link for more info
https://ionicframework.com/blog/customize-your-ionic-framework-app-with-css-shadow-parts/?_gl=1*1wk5td8*_ga*NDA3OTM3NDc2LjE2MTAzNjA2Nzk.*_ga_REH9TJF6KF*MTYyMjY2OTIwMC4xMTMuMS4xNjIyNjY5MzAwLjA.
Here is a snapshot of menu after above css implementation.
[1]: https://i.stack.imgur.com/T2xsu.png
你找到这个问题的解决方案了吗?请在这里分享你的答案。我的ionic应用程序也有同样的问题。谢谢你。我还没有找到解决这个问题的正确方法,但我确实找到了一个工作,我将在这里的答案中发布。我找到了解决方法,我将答案发布在这里。这将是在ionic 4中实现这一点的方法+