Переключатель меню Ionic 3 split pane не отображается - PullRequest
Новая
       54

Переключатель меню Ionic 3 split pane не отображается

0 голосов
/ 23 января 2019

Я создал мое приложение 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 Ответ

0 голосов
/ 25 января 2019

Вы забыли добавить кнопку переключения меню в заголовок своей страницы следующим образом: 

<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>

Таким образом, когда отображается панель, она не будет отображать кнопку меню, но когда на меньших экранах панель скрыта, кнопка отображается.

Надеюсь, это поможет.

...