İyonik 2 - (- sol sağ)

Question

DURUM aynı anda birden çok menüsü: my İon 2 app bir çalışma sağ menü

. Sol menü eklemem gerekiyor. Denedim ama şu ana kadar başarısız oldu.

KOD: Bu benim girişimi sağ menü düzgün çalışıyor bu kod ile

, ancak sol menü görünmüyor.

app.html:

<ion-menu [content]="content" id="menu1"> 

    <ion-header> 
     <ion-toolbar> 
      <ion-title>Pages</ion-title> 
     </ion-toolbar> 
    </ion-header> 

    <ion-content> 
     <ion-list> 
      <button ion-item *ngFor="let p of pages" (click)="openPage(p)"> 
       {{p.title}} 
      </button> 
     </ion-list> 
    </ion-content> 

</ion-menu> 


<ion-menu [content]="content" id="menu2"> 

    <ion-header> 
    <ion-toolbar color="danger"> 
     <ion-title>Menu 2</ion-title> 
    </ion-toolbar> 
    </ion-header> 

    <ion-content> 
    <ion-list> 
     <button ion-item menuClose="menu2" detail-none> 
     Close Menu 2 
     </button> 
    </ion-list> 
    </ion-content> 

</ion-menu> 

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav> 

app.component.ts:

constructor(
     public platform: Platform, 
     public menu: MenuController 
    ) { 
     this.initializeApp(); 

     this.pages = [ 
      { title: 'Home', component: HomePage }, 
      { title: 'Login', component: LoginPage }, 
     ]; 

     this.menu.enable(true, 'menu1'); 
     this.menu.enable(true, 'menu2'); 
    } 

SORU: İki menü nasıl

- sol ve doğru - aynı zamanda düzgün çalışıyor mu?

<ion-menu [content]="content" side="left" id="menu1">...</ion-menu> 

Ve

<ion-menu [content]="content" side="right" id="menu2">...</ion-menu> 

DÜZENLEME:

Teşekkür @johnnyfittizio için

Answer 1

Sadece böyle side="left" ve side="right" eklemem gerekiyor, sen here görebilirsiniz gibi senin yorumların! Orada bahsettiğiniz değişiklikleri yaptım (lütfen bir şeyi unutursam lütfen bu cevabı düzenleyin).

Yani temelde biz sadece böyle (app.html sayfasında, örneğin) her iki menüler eklemek gerekir:

<ion-menu [content]="content" side="left" id="menu1"> 
    <ion-content> 
    <ion-list> 
     <button ion-item menuClose="menu1" detail-none> 
     Close Menu 1 
     </button> 
    </ion-list> 
    </ion-content> 
</ion-menu> 

<ion-menu [content]="content" side="right" id="menu2"> 
    <ion-content> 
    <ion-list> 
     <button ion-item menuClose="menu2" detail-none> 
     Close Menu 2 
     </button> 
    </ion-list> 
    </ion-content> 
</ion-menu> 



<ion-nav [root]="rootPage" #content></ion-nav> 

Sonra böyle başlığındaki hem menü düğmeleri eklemek gerekir:

<ion-header> 
    <ion-navbar primary> 
    <button ion-button menuToggle="left" start> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title> 
     HomePage 
    </ion-title> 
    <button ion-button menuToggle="right" end> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
    <p>Home page</p> 

</ion-content> 

Lütfen uygun düğmeyi değiştirebilmek için her düğmenin menuToggle="left" veya menuToggle="right" özelliğine sahip olduğunu unutmayın.