Переключатель меню Ionic 3 split pane не отображается
Я создал свое приложение Ionic для SplitPane, оно работает нормально. но я столкнулся с некоторым конфликтом . Разделенная панель отображается на больших экранах, но кнопка переключателя не отображается на маленьких экранах. и когда я его поменяю, то после меню показывает. Кто- нибудь знает, как решить эту проблему в небольших устройствах, посмотрите мой код Stackblitz здесь
часть кода 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>
1 ответ
Решение
Вы забыли добавить кнопку переключения меню в заголовок страницы следующим образом:
<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>
Таким образом, когда отображается панель, она не будет отображать кнопку меню, но когда на меньших экранах панель скрыта, кнопка отображается.
Надеюсь это поможет.