ionic ion-menu border-radius 没有改变

Question

我需要在 ion-menu 中设置 border-radius，但是当我在整个页面的阴影上应用它时。我只需要在白色菜单中做。

这是它的显示方式

我需要这样展示

我的app.component.html

<ion-app>
    <ion-menu side="end"  contentId="menu-content">

    <ion-content >
        <div >

        <div style="text-align: right;">
            <ion-icon name="more" style="font-size: 25px;"></ion-icon>
        </div>
        <div style="display: flex; justify-content: center;">
            <ion-avatar style="text-align: center;">
             <img src="../../assets/img/demo.jpg">
            </ion-avatar>
        </div>
        <div style="text-align: center; margin-top: 15px; font-size: 18px;">
            Downloads
        </div>
        <div style="text-align: center; margin-top: 15px; font-size: 18px;">
            Sign Out
        </div>
        <div style="text-align: center; margin-top: 15px; font-size: 18px;">

        </div>
    </div>

    </ion-content>

    </ion-menu>
<ion-router-outlet id="menu-content"></ion-router-outlet>
</ion-app>

global.scss

ion-menu{
--background: white !important;
  --width: 150px;
  --height: 170px;

}

当我在 ion-menu 中添加 border-radius 时，它只是改变了整个模糊页面的半径。我需要知道我能否更改具有 width of 150px;

的白框的半径

Answer 1

Sergey 是对的，对于这类事情你需要使用 popover - https://ionicframework.com/docs/api/popover。

使用您的代码，我能够快速创建您需要的UI。

此外，我已将代码放在 github 上，这样您就可以看到我在那里做了什么：https://github.com/App-to-date/menu-popover

Answer 2

HTML:

<ion-menu side="end"  contentId="menu-content">
[style]="sanitizer.bypassSecurityTrustStyle(yourStyle)">

打字稿：

import {DomSanitizer} from "@angular/platform-browser";

yourStyle = "--background: white !important; --width: 150px; --height: 170px;"

constructor(private sanitizer: DomSanitizer)

Answer 3

如果帮助另一个人，工作...

const popover = await this.popoverController.create({
            component: MenuComponent,
            event: event,
            translucent: false
        });
// INJECT BORDER-RADIUS
popover.shadowRoot.lastChild.lastChild['style'].cssText = 'border-radius: 20px !important;';

return await popover.present();

ionic ion-menu border-radius 没有改变

ionic ion-menu border-radius is not changing

ionic-framework

ionic4