ionic-framework - 离子侧边菜单错误
问题描述
当我启动我的离子应用程序时,它有时会以不同的菜单“布局”开始
在前两个图像中是布局结果的第一个示例。在第三张图片中是第二个布局。
我尝试过<ion-menu-button></ion-menu-button>
像 autoHide 这样的标签。
我的 app.component.html 代码:
<ion-app>
<ion-split-pane>
<ion-menu *ngIf="Auth" side="start">
<ion-header>
<ion-toolbar>
<ion-title>SocialApp</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
<ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
<ion-icon padding-end [name]="p.icon"></ion-icon>
<ion-label>
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-split-pane>
</ion-app>
以及其中一页的代码
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button ></ion-menu-button>
</ion-buttons>
<ion-title>
{{ 'header.map' | translate }}
</ion-title>
<ion-button (click)="help.showHelp('map')" slot="end">
<ion-icon icon="help"></ion-icon>
</ion-button>
</ion-toolbar>
</ion-header>
<ion-content>
<div id="map"></div>
</ion-content>
我想总是在屏幕上获得相同的布局,而不是有时会得到一个或另一个。
如果有人可以帮助我解释为什么会发生这种情况以及我如何防止这种情况发生,将不胜感激。
解决方案
ion-split-pane
吐痰取决于设备屏幕尺寸https://ionicframework.com/docs/api/split-pane。如果您希望在第一个上永久使用它,您可以<ion-split-pane when="xs">
在第二个<ion-split-pane disabled='true'>
或特定数量上永久执行此操作<ion-split-pane when="500">
。如果不调整我的浏览器大小,就无法复制您的体验:/
推荐阅读
- javascript - 如何检测 Bootstrap 表中的数据变化?
- scala - 使用 Spark Submit 顺序执行包中的所有对象
- c# - 如何在 WPF 应用程序中禁用对 PrtScrn 的拦截?
- r - 是否可以使用粘贴在 R 中创建值名称?
- php - 通过 php artisan 迁移会导致 QueryException
- r - expand_grid 正在创建一个数据框列,如何将它们转换为简单列
- javascript - 如何在我的反应路由器代码中添加错误页面?
- c# - 匹配三个错误
- .net - Autofac:如何在考虑所有父范围的情况下获取范围的所有注册?
- flutter - 运行时颤动“与设备的连接丢失”