如何在同一页面上制作两个Ionic侧菜单？

zzlelutf 于 2022-12-08 发布在 Ionic

关注(0)|答案(2)|浏览(187)

I am making a ionic project and i want to have one left menu and one right menu,and the content on the midle.
My poblem is that i can only place one ionic-menu. I tried to place both, but only one appears.
The problems i get i where i place my , because both menus on the ionic docs have one.
This is my code:
Menu: 1 :

<ion-split-pane contentId="main" >
  <!--  the side menu  -->
  <ion-menu side="start" menu-id="test1">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
  </ion-menu>

  <!-- the main content -->
  <ion-router-outlet id="main"></ion-router-outlet>
</ion-split-pane>

Menu 2:

<ion-split-pane contentId="main" >
  <!--  the side menu  -->
  <ion-menu side="start" menu-id="test1">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
  </ion-menu>

  <!-- the main content -->
  <ion-router-outlet id="main"></ion-router-outlet>
</ion-split-pane>

Main content:

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

<ion-content>
    <ion-menu-button slot="start">TEste</ion-menu-button>
    <ion-menu-button slot="end">TEste</ion-menu-button>
</ion-content>

These are in separated files.
I want this :

But when i run the page, only one menu is displayed, the start one.

ionic-framework

来源：https://stackoverflow.com/questions/62746330/how-to-make-two-ionic-side-menus-on-the-same-page-ionic

2条答案

按热度按时间

kmbjn2e31#

You need to add another ion-menu to you app.component.html and ensure you add the “side” attribute:

<ion-app>
  <ion-split-pane contentId="main-content">
    <ion-menu side="start" contentId="main-content" type="overlay">
      <ion-content>
        <ion-list id="inbox-list">
          <ion-list-header>Inbox</ion-list-header>
          <ion-note>hi@ionicframework.com</ion-note>

          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
            <ion-item (click)="selectedIndex = i" routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" [class.selected]="selectedIndex == i">
              <ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
              <ion-label>{{ p.title }}</ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>

        <ion-list id="labels-list">
          <ion-list-header>Labels</ion-list-header>

          <ion-item *ngFor="let label of labels" lines="none">
            <ion-icon slot="start" ios="bookmark-outline" md="bookmark-sharp"></ion-icon>
            <ion-label>{{ label }}</ion-label>
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-menu>

    <ion-router-outlet id="main-content"></ion-router-outlet>
    
    <ion-menu side="end" contentId="main-content" type="overlay">
      <ion-content>
        <ion-list id="inbox-list">
          <ion-list-header>Inbox</ion-list-header>
          <ion-note>hi@ionicframework.com</ion-note>

          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
            <ion-item (click)="selectedIndex = i" routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" [class.selected]="selectedIndex == i">
              <ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
              <ion-label>{{ p.title }}</ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>

        <ion-list id="labels-list">
          <ion-list-header>Labels</ion-list-header>

          <ion-item *ngFor="let label of labels" lines="none">
            <ion-icon slot="start" ios="bookmark-outline" md="bookmark-sharp"></ion-icon>
            <ion-label>{{ label }}</ion-label>
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-menu>
  </ion-split-pane>
</ion-app>

Now in order to feature menu buttons in each of the pages you need to add another ion-menu-button and use "menu" attribute to indicate which side it controls:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button menu="start"></ion-menu-button>
    </ion-buttons>
    <ion-title>{{ folder }}</ion-title>
    <ion-buttons slot="end">
      <ion-menu-button menu="end"></ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

Above I used standard sidemenu ionic app (ionic start, then choose sidemenu app template)

赞(0）回复(0）举报 2022-12-08

3npbholx2#

你可以用我的密码我想这是正确的答案

<ion-app>
  <ion-menu side="start" menuId="start" contentId="main">
    <ion-header>
      <ion-toolbar color="tertiary">
        <ion-title>Menu Left</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding"></ion-content>
  </ion-menu>
  <ion-menu side="end" menuId="end" contentId="main">
    <ion-header>
      <ion-toolbar color="tertiary">
        <ion-title>Menu right</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding"></ion-content>
  </ion-menu>
  <div id="main">
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-menu-button menu="start" color="light">
            <ion-icon name="menu-outline"></ion-icon>
          </ion-menu-button>
        </ion-buttons>
        <ion-buttons slot="end">
          <ion-menu-button menu="end" color="light">
            <ion-icon name="ellipsis-vertical-sharp"></ion-icon>
          </ion-menu-button>
        </ion-buttons>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
    </ion-content>
  </div>
</ion-app>

赞(0）回复(0）举报 2022-12-08

我来回答

如何在同一页面上制作两个Ionic侧菜单？

2条答案

相关问题

热门标签

最新问答