我在ion 4应用程序中遇到问题,ion菜单中的自定义宽度在iPhone 5/5s中不起作用。它在iPhone 6及以上版本中运行良好。
我想要自定义宽度100px的菜单。
app.component.html
<ion-app>
<ion-split-pane>
<ion-menu class="appMainmenu" type="overlay" [swipeGesture]="false">
<ion-content class="bg-profile">
<ion-list no-margin>
<ion-list-header color="dark" margin-bottom style="min-height: 2.9em;">
<ion-label>Menu</ion-label>
</ion-list-header>
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
<div [routerLink]="[p.url]" class="menuMargin" text-center (click)="openPage(p)"
[class.activeMenu]="checkActivePage(p)">
<h4 class="fs-35" no-padding>
<ion-icon slot="start" [name]="p.icon" color="dark"></ion-icon>
</h4>
<h5 class="fs-13" no-padding> {{p.title}} </h5>
</div>
</ion-menu-toggle>
<ion-menu-toggle auto-hide="false">
<div class="menuMargin" text-center (click)="logout()" [class.activeMenu]="checkActivePage(p)">
<h4 class="fs-35" no-padding>
<ion-icon name="power" color="dark"></ion-icon>
</h4>
<h5 class="fs-13" no-padding> Logout </h5>
</div>
<div ctext-center>
<h4 class="versioncss" no-padding>V - 1.0.28</h4>
</div>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet [swipeGesture]="false" main></ion-router-outlet>
global.css
.appMainmenu{
--width: 100px;
width: 100px
}
尝试在css中添加ion-menu
作为选择器:
ion-menu.appMainmenu {
--width: 100px;
}