Ionic 3 拆分窗格菜单切换未显示
Ionic 3 split pane menu toggle not displayed
我为 SplitPane 创建了我的 Ionic 应用程序,该应用程序运行良好。
但我遇到了一些冲突
大屏显示分割面板,小屏不显示切换菜单按钮。和当我交换它时,菜单显示后。
任何人都知道如何在小型设备中解决该问题
看我的代码
Stackblitz here
代码部分
app.html
<ion-split-pane>
<ion-menu [content]="someContent">
<ion-header>
<ion-toolbar>
<ion-title>
Menu
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item (click)="setCategory('nature')">
<ion-avatar item-left>
</ion-avatar>
<h3>Home</h3>
</ion-item>
<ion-item (click)="setCategory('food')">
<ion-avatar item-left>
</ion-avatar>
<h3>Categories</h3>
</ion-item>
<ion-item (click)="setCategory('people')">
<ion-avatar item-left>
</ion-avatar>
<h3>Get One</h3>
</ion-item>
<ion-item (click)="setCategory('people')">
<ion-avatar item-left>
</ion-avatar>
<h3>Settings</h3>
</ion-item>
<ion-item (click)="setCategory('people')">
<ion-avatar item-left>
</ion-avatar>
<h3>My Partner</h3>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #someContent main></ion-nav>
</ion-split-pane>
您忘记在页眉中添加菜单切换按钮,如下所示:
<ion-header>
<ion-navbar>
<!-- Add this button in the pages you want to show the menu button -->
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
About
</ion-title>
</ion-navbar>
</ion-header>
这样当窗格显示时它不会显示菜单按钮,但是当在较小的屏幕上并且窗格被隐藏时,按钮会显示。
我为 SplitPane 创建了我的 Ionic 应用程序,该应用程序运行良好。 但我遇到了一些冲突 大屏显示分割面板,小屏不显示切换菜单按钮。和当我交换它时,菜单显示后。 任何人都知道如何在小型设备中解决该问题 看我的代码 Stackblitz here
代码部分 app.html
<ion-split-pane>
<ion-menu [content]="someContent">
<ion-header>
<ion-toolbar>
<ion-title>
Menu
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item (click)="setCategory('nature')">
<ion-avatar item-left>
</ion-avatar>
<h3>Home</h3>
</ion-item>
<ion-item (click)="setCategory('food')">
<ion-avatar item-left>
</ion-avatar>
<h3>Categories</h3>
</ion-item>
<ion-item (click)="setCategory('people')">
<ion-avatar item-left>
</ion-avatar>
<h3>Get One</h3>
</ion-item>
<ion-item (click)="setCategory('people')">
<ion-avatar item-left>
</ion-avatar>
<h3>Settings</h3>
</ion-item>
<ion-item (click)="setCategory('people')">
<ion-avatar item-left>
</ion-avatar>
<h3>My Partner</h3>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #someContent main></ion-nav>
</ion-split-pane>
您忘记在页眉中添加菜单切换按钮,如下所示:
<ion-header>
<ion-navbar>
<!-- Add this button in the pages you want to show the menu button -->
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
About
</ion-title>
</ion-navbar>
</ion-header>
这样当窗格显示时它不会显示菜单按钮,但是当在较小的屏幕上并且窗格被隐藏时,按钮会显示。