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

Sam*_*l G 1 ionic-framework

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

Man*_*kla 8

这实际上非常简单.您只需要有两个侧面菜单和两个相应的按钮来切换侧面菜单.

例如:

    <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>
Run Code Online (Sandbox Code Playgroud)

您可以在这里参考完整的codepen