Comment puis-je inclure à la fois de gauche et de droite sidemenu ionique?

Comment puis-je inclure un menu de gauche, déclenché par la gauche navicon, et un menu de droite, déclenchée par le droit navicon à l'aide de l'ionic framework?

InformationsquelleAutor Chev | 2014-11-30
  1. 8

    C'est vraiment très simple. Vous avez juste besoin d'avoir deux côté-menus, et deux boutons correspondants qui va basculer du côté des menus.

    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>

    Vous pouvez vous référer à la complète codepen ici

    • Merci pour le codepen!
    • S'il vous plaît pouvez-vous me dire comment faire pour ajouter sidemenu dans l'onglet application de l'ionique?
    • Vous pouvez inclure votre onglet conteneur dans le <ion-menu latéral-contenu> de la balise
    InformationsquelleAutor Manish Kr. Shukla
  2. 0

    C'est très simple, vous pouvez créer sidemenu application et ouvrez le menu fichier et copiez la balise de contenu à gauche et à les mettre au même que le menu de gauche et modifié son nom right à left

    HTML:

    <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>

    InformationsquelleAutor Darshak Shekhda
  3. 0

    Pour Ionic4 le balisage un peu changé, mais il est toujours aussi simple.

    <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>
    • Je n'arrivais pas à générer un contenu différent à partir de la gauche et droit de l'icône. J'ai l'ion-balise d'en-tête(où sont mes deux boutons pour l'ouverture de navigation) dans la maison de la composante. et ion-menu code dans l'app composant. toujours ouvre le menu de gauche de contenu. @kneeki
    InformationsquelleAutor kneeki