Как построить меню с двумя уровнями подменю в Ionic 3 - PullRequest
Новая
       44

Как построить меню с двумя уровнями подменю в Ionic 3

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

У меня есть приложение Ionic3 с боковым меню. Мне нужно создать меню с подменю, но в этом подменю у меня есть другой уровень списка (подменю в подменю). У меня есть такой пример, но только с одним уровнем подменю: https://stackblitz.com/edit/multi-level-side-menu?file=app%2Fapp.component.ts

app.html 

 <ion-menu [content]="content">
  <ion-header>
   <ion-toolbar  class="menu-header">
    <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>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

app.component.ts 

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { TermsPage } from '../pages/terms/terms';

@Component({
 templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = HomePage;


  pages: Array<{title: string, component: any}>;

  constructor(public platform: Platform, public statusBar: StatusBar, public 
     splashScreen: SplashScreen) {
this.initializeApp();

// used for an example of ngFor and navigation
this.pages = [
  { title: 'Home', component: HomePage },
  { title: 'List', component: ListPage }
];

}

initializeApp() {
this.platform.ready().then(() => {
  // Okay, so the platform is ready and our plugins are available.
  // Here you can do any higher level native things you might need.
  this.statusBar.styleDefault();
  this.splashScreen.hide();
});
}

openPage(page) {
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
  this.nav.setRoot(page.component);
}
}

Ответы [ 2 ]

0 голосов
/ 11 апреля 2019

@ Виталий Вы также можете использовать тег <ion-item-group> для группировки вашего подсписка в пределах <ion-list>, чтобы избежать использования вложенного <<code>ion-list>. 

 <ion-list id="sidenav" *ngFor="let p of appPages;index as i">
 <ion-item lines="full" (click)="toggleLevel1('idx'+i)" [ngClass]="{active: isLevel1Shown('idx'+i)}"
    lines="full">
 <ion-icon slot="start" [name]="p.icon"></ion-icon>
   {{p.list_header}}
 <ion-icon color="dark" slot="end" *ngIf="p.subList_title != null" [name]="isLevel1Shown('idx'+i)  ? 'arrow-dropdown' : 'arrow-dropright'">
  </ion-icon>
  </ion-item>
  <ion-item-group *ngFor="let sub of p.subList_title" submenu [class.visible]="isLevel1Shown('idx'+i)">
  <ion-item submenu-item *ngIf="isLevel1Shown('idx'+i)" lines="none">{{sub.title}}</ion-item>
  </ion-item-group>
  </ion-list>
0 голосов
/ 10 апреля 2019

Ваш массив должен иметь несколько уровней массива, т.е. массив с массивом в (зависит от того, сколько подуровней меню вы хотите), а затем отображать содержимое массива с помощью списка вложенности (list with in list)

например: ваш массив будет как: 

public appPages = [
    {
      list_header: 'Client List',
      icon: 'home',
      subList: [{
        subList_title: [

          {
            title: 'a'
          },
          {
            title: 'b'
          }
        ]

      }]
    }]

и ваш список в вашем HTML, как: 

   <ion-list>
            <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages" text-wrap>
             <ion-item [routerDirection]="'root'" [routerLink]="[p.url]"> 
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>
                {{p.list_header}}
              </ion-label>
              <ion-list>
                <ion-item *ngFor="let sub of p.subList" text-wrap>
                  <ion-list>
                    <ion-item lines="none" *ngFor="let t of sub.subList_title" text-wrap>
                      {{t.title}}
                    </ion-item>
                  </ion-list>
                </ion-item>
              </ion-list>
               </ion-item> 
  </ion-menu-toggle>
   </ion-list>
...