Ionic | App from Scratch – Two Sidemenus
Inhaltsverzeichnis
Prepare your starter App
ionic start App sidemenu --type angular --no-git
Change into the newly create folder and start the Ionic App
cd App ionic serve
You will see the default Ionic Sidemenu App
The entries of the sSidemenu are defined in app.components.ts:
export class AppComponent { public appPages = [ { title: 'Home', url: '/home', icon: 'home' }, { title: 'List', url: '/list', icon: 'list' } ];
The sidemenu itself and his apperance are defined in app.component.html:
<ion-app> <ion-split-pane contentId="main-content"> <ion-menu contentId="main-content" type="overlay"> <ion-header> <ion-toolbar> <ion-title>Menu</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-list> <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages"> <ion-item [routerDirection]="'root'" [routerLink]="[p.url]"> <ion-icon slot="start" [name]="p.icon"></ion-icon> <ion-label>{{p.title}}</ion-label> </ion-item> </ion-menu-toggle> </ion-list> </ion-content> </ion-menu> <ion-router-outlet id="main-content"></ion-router-outlet> </ion-split-pane> </ion-app>
The Sidemenu entries and the Icon are added in line 13 and 14 to the sidemenu.
<ion-menu [content]="contentLeft"> ....</ion-menu> <ion-menu side="right" [content]="contentRight">....</ion-menu> .... <ion-nav [root]="rootPage" #contentLeft #contentRight swipeBackEnabled="false"></ion-nav>
<ion-header> <ion-navbar> <button ion-button start menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title>Demo of two Sidemenus</ion-title> <button ion-button end menuToggle="right"> <ion-iconname="menu"></ion-icon> </button> </ion-navbar> </ion-header> <ion-content padding> </ion-content>
Result
Github Repository
You can find the code here
Leave a Reply