如何在离子中包含左侧和右侧菜单？

Question

如何包含由左侧navicon触发的左侧菜单和右侧菜单，由右侧navicon使用离子框架触发？

Answer 1

这实际上非常简单。您只需要有两个侧面菜单，以及两个相应的按钮，可以切换侧面菜单。

E.g：

    <ion-side-menus>
        <ion-side-menu-content>
            <ion-nav-bar class="bar-dark">
                <ion-nav-back-button class="button-icon ion-arrow-left-c">
                </ion-nav-back-button>
            </ion-nav-bar>
            <ion-nav-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
                </button>
            </ion-nav-buttons>
            <ion-nav-buttons side="right">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="right">
                </button>
            </ion-nav-buttons>
            <ion-nav-view name="appContent"></ion-nav-view>
        </ion-side-menu-content>
        <ion-side-menu side="left">
            <ion-header-bar class="bar-assertive">
                <h1 class="title">Left Menu</h1>
            </ion-header-bar>
            <ion-content>
                <ion-cart ng-controller='CartController'></ion-cart>
            </ion-content>
        </ion-side-menu>
        <ion-side-menu side="right">
            <ion-header-bar class="bar-assertive">
                <h1 class="title">Right Menu</h1>
            </ion-header-bar>
            <ion-content>
                <ion-cart ng-controller='CartController'></ion-cart>
            </ion-content>
        </ion-side-menu>
    </ion-side-menus>

你可以参考完整的codepen here

Answer 2

这很简单，你可以创建sidemenu应用程序和打开菜单文件和复制标签，其中的内容留下并将它们与左菜单相同，并将其名称right修改为left

<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content>
        <ion-nav-bar class="bar-dark">
            <ion-nav-back-button>
            </ion-nav-back-button>
            <ion-nav-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
                </button>
            </ion-nav-buttons>
            <ion-nav-buttons side="right">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="right">
                </button>
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content>
    <ion-side-menu side="left">
        <ion-header-bar class="bar-stable">
            <h1 class="title">Left</h1>
        </ion-header-bar>
        <ion-content>
            <ion-list>
                <ion-item menu-close ng-click="login()">
                    Login
                </ion-item>
                <ion-item menu-close href="#/app/search">
                    Search
                </ion-item>
                <ion-item menu-close href="#/app/browse">
                    Browse
                </ion-item>
                <ion-item menu-close href="#/app/playlists">
                    Playlists
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
    <ion-side-menu side="right">
        <ion-header-bar class="bar-stable">
            <h1 class="title">Right</h1>
        </ion-header-bar>
        <ion-content>
            <ion-list>
                <ion-item menu-close ng-click="login()">
                    Login
                </ion-item>
                <ion-item menu-close href="#/app/search">
                    Search
                </ion-item>
                <ion-item menu-close href="#/app/browse">
                    Browse
                </ion-item>
                <ion-item menu-close href="#/app/playlists">
                    Playlists
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

Answer 3

对于Ionic4，标记有所改变，但仍然很简单。

<ion-split-pane>
   <!-- left content here -->
  <ion-menu side="start">
    <ion-content>
      <app-profile></app-profile>
    </ion-content>
  </ion-menu>

   <!-- right content here -->
  <ion-menu side="end">
    <ion-content>
      <app-other-user-profile [user]="them"></app-other-user-profile>
    </ion-content>
  </ion-menu>

  <ion-content main>
   <!-- main window content here -->
  </ion-content>
</ion-split-pane>