Ionic 4 split pane - боковое меню не может быть проведено - PullRequest
Новая
       19

Ionic 4 split pane - боковое меню не может быть проведено

0 голосов
/ 01 сентября 2018

Я только что инициализировал новый проект Ionic 4 с шаблоном разделенной панели.

Итак, у меня есть приложение с боковым меню, которое должно быть в состоянии прокручиваться. Но оно не работает. В документации это работает: https://beta.ionicframework.com/docs/api/split-pane

Вот код: 

<ion-app>
  <ion-split-pane when="md">
    <ion-menu>
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu</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 slot="start" [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>

Кто-то знает, что мне не хватает?

1 Ответ

0 голосов
/ 26 октября 2018

По проверке, существует разница между связанными классами стилей и между Chrome и другими браузерами с тем же разрешением экрана:

  • в Chrome: оверлей типа меню с включенным меню, гидратированная разделенная панель, боковое меню, стартовое меню, панель видимая
  • другой браузер: оверлей типа меню с поддержкой меню, боковое начало, гидратированное шоу-меню

Так что мой обходной путь, чтобы показать динамически разделенную панель слева / справа, это добавить условные классы в соответствии с разрешением: 

<ion-menu [side]="sideMenu"
        [ngClass]="{'split-pane-side': sideMenu == 'start', 'menu-pane-visible': sideMenu == 'start', 'show-menu': sideMenu == 'end'}">

В моем app.component.ts: 

@HostListener('window:resize', ['$event'])
    onResize(event: Event): void {
        this.sideMenu = this.platform.width() > 767 ? 'start' : 'end';
        this.changeDetectorRef.detectChanges();
        this.changeDetectorRef.markForCheck();
    }

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

...