- เตรียมโปรเจ็กส์
- เตรียมเมนู
- app.component.ts
- วาดเมนู และเรียกใชงานเมนู
1. เตรียมโปรเจ็กส์
[code]
ionic start Sidemenu sidemenu
[/code]
สร้างเพจ topic1 และ topic2
[code]
cd Sidemenu
ionic g page topic1
ionic g page topic2
[/code]
สร้าง provider menu
[code]
ionic g provider menu
[/code]
ลบโฟลเดอร์ src/pages/list
2. เตรียมเมนู
src/providers/menu/menu.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; @Injectable() export class MenuProvider { constructor(public http: HttpClient) { console.log('Hello MenuProvider Provider'); } getSideMenus() { return [{ title: 'Home', component: 'HomePage' }, { title: 'Topics', subPages: [{ title: 'Topic1', component: 'Topic1Page', }, { title: 'Topic2', component: 'Topic2Page', }] }]; } } |
3. app.module.ts
src/app/app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; import { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; //import { ListPage } from '../pages/list/list'; import { Topic1Page } from '../pages/topic1/topic1'; import { Topic2Page } from '../pages/topic2/topic2'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; import { MenuProvider } from '../providers/menu/menu'; import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ MyApp, HomePage, //ListPage Topic1Page, Topic2Page ], imports: [ BrowserModule, IonicModule.forRoot(MyApp), HttpClientModule ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage, //ListPage Topic1Page, Topic2Page ], providers: [ StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler}, MenuProvider ] }) export class AppModule {} |
4. app.component.ts
src/app/app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
import { Component, ViewChild } from '@angular/core'; import { Nav, Platform, MenuController } from 'ionic-angular'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; import { HomePage } from '../pages/home/home'; //import { ListPage } from '../pages/list/list'; import { Topic1Page } from '../pages/topic1/topic1'; import { Topic2Page } from '../pages/topic2/topic2'; import { MenuProvider } from '../providers/menu/menu'; @Component({ templateUrl: 'app.html' }) export class MyApp { @ViewChild(Nav) nav: Nav; rootPage: any = HomePage; //pages: Array<{title: string, component: any}>; pages: any; selectedMenu: any; constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, public menuProvider: MenuProvider, public menuCtrl: MenuController) { this.initializeApp(); // used for an example of ngFor and navigation // this.pages = [ // { title: 'Home', component: HomePage }, // { title: 'List', component: ListPage } // ]; } initializeApp() { this.platform.ready().then(() => { // Okay, so the platform is ready and our plugins are available. // Here you can do any higher level native things you might need. this.getSideMenuData(); this.statusBar.styleDefault(); this.splashScreen.hide(); }); } getSideMenuData() { this.pages = this.menuProvider.getSideMenus(); } openPage(page, index) { // Reset the content nav to have just this page // we wouldn't want the back button to show in this scenario if (page.component) { switch (page.component) { case "HomePage": this.nav.setRoot(HomePage); break; case "Topic1Page": this.nav.setRoot(Topic1Page); break; case "Topic2Page": this.nav.setRoot(Topic2Page); break; } this.menuCtrl.close(); } else { if (this.selectedMenu) { this.selectedMenu = 0; } else { this.selectedMenu = index; } } } } |
5. วาดเมนู และเรียกใชงานเมนู
src/app/app.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<ion-menu [content]="content"> <ion-header> <ion-toolbar> <ion-title>Menu</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-list> <ion-item ion-item *ngFor="let p of pages; let i=index" (click)="openPage(p, i);"> <ion-row> <!-- Parent Pages --> <ion-col col-9 class="menu-name"> <span ion-text> {{p.title}} <ion-icon [name]="selectedMenu == i? 'arrow-down' : 'arrow-forward'" *ngIf="p.subPages" float-right></ion-icon> </span> <!-- Child Pages --> <ion-list no-lines [hidden]="selectedMenu != i"> <ion-item no-border *ngFor="let subPage of p.subPages;let i2=index" text-wrap (click)="openPage(subPage)"> <ion-row> <ion-col col-10 class="menu-name"> <span ion-text color="color2"> {{subPage.title}}</span> </ion-col> </ion-row> </ion-item> </ion-list> </ion-col> </ion-row> </ion-item> </ion-list> </ion-content> </ion-menu> <!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus --> <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav> |
src/pages/home/home.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<ion-header> <ion-navbar> <button ion-button menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title>Home</ion-title> </ion-navbar> </ion-header> <ion-content padding> <h3>Ionic Menu Starter</h3> <p> If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will show you the way. </p> <button ion-button secondary menuToggle>Toggle Menu</button> </ion-content> |
Note: home.html มีเมนูอยู่แล้ว ไม่ต้องแก้ไขอะไร
src/pages/topic1/topic1.html
1 2 3 4 5 6 7 8 9 10 11 12 |
<ion-header> <ion-navbar> <button ion-button menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title>topic1</ion-title> </ion-navbar> </ion-header> <ion-content padding> </ion-content> |
src/pages/topic1/topic2.html
1 2 3 4 5 6 7 8 9 10 11 12 |
<ion-header> <ion-navbar> <button ion-button menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title>topic2</ion-title> </ion-navbar> </ion-header> <ion-content padding> </ion-content> |
Link
- Ionic 3 Multi Level Accordion Menu
- Multi-level Side Menu ยังไม่ได้ลอง แต่น่าจะเจ๋งดี