Ion-Split-Pane не масштабируется для мобильных устройств - PullRequest
Новая
       34

Ion-Split-Pane не масштабируется для мобильных устройств

0 голосов
/ 06 июня 2018

У меня есть мобильное приложение / веб-сайт (в Ionic 3.25), и я хотел поддерживать работу браузера на настольном компьютере, не тратя все это место на экране.Я наткнулся на Ion-Split-Pane.Это казалось идеальным из документации, позволяя мне открывать боковое меню как полное меню, когда использовался большой экран.Я установил код в соответствии с рекомендациями в файле app.html: 

<ion-split-pane when="md">
  <ion-menu [content]="content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list>
          <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
            {{p.title}}
          </button>
        </ion-list>
      </ion-content>
  </ion-menu>
  <!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
  <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
</ion-split-pane>

Поведение, которое я получаю при использовании Ionic Serve, сбивает с толку.Когда я использую большой экран (выше где-то около 922 пикселей в ширину), я получаю три панели, с кучей пробелов, не содержащих ничего в дальнем правом углу.Это было удивительно, так как я думал, что приложение будет использовать доступное пространство:

Full Screen Experience

Когда я затем уменьшусь до этого размера, весь сайт / приложение исчезнет,Элементы все еще находятся в html, но на экран ничего не выводится.

Это поведение настолько далеко от документации, что у меня должно быть что-то не так, но я не уверен, что.Кто-нибудь знает, как я мог заставить эту панель работать?

1 Ответ

0 голосов
/ 07 июня 2018

Поработав некоторое время, я обнаружил свою проблему.Это явно не упомянуто в документации, поэтому я опубликую ответ здесь на случай, если кто-то столкнется с ним.

При преобразовании проекта бокового меню для использования Ion-Split-Pane, раздел контентанеобходимо добавить ключевое слово main к объекту <ion-nav>.#content и [root] недостаточно.

Исправленный код: 

<ion-split-pane when="md">
  <ion-menu [content]="content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list>
          <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
            {{p.title}}
          </button>
        </ion-list>
      </ion-content>
  </ion-menu>
  <!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
  <ion-nav [root]="rootPage" main #content swipeBackEnabled="false"></ion-nav>
</ion-split-pane>

Без этой строки все приложение выбрасывается на панель меню и просто исчезает при переходе кмобильный вид.

...