1. เตรียมโปรเจ็กส์
สร้างโปรเจ็กส์ชื่อ Tabsmenu
[code]
ionic start Tabsmenu tabs
cd Tabsmenu
[/code]
สร้าง provider menu
[code]
ionic g provider menu
[/code]
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 27 28 |
import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { TabsPage } from '../../pages/tabs/tabs'; @Injectable() export class MenuProvider { constructor(public http: HttpClient) { console.log('Hello MenuProvider Provider'); } getSideMenus() { return [{ title: 'Home', component: TabsPage, icon: "home", index: 0 }, { title: 'Topics', subPages: [{ title: 'About', component: TabsPage, icon: "information-circle", index: 1 }, { title: 'Contact', component: TabsPage, icon: "contacts", index: 2 }] }]; } } |
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 45 |
import { NgModule, ErrorHandler } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; import { MyApp } from './app.component'; import { AboutPage } from '../pages/about/about'; import { ContactPage } from '../pages/contact/contact'; import { HomePage } from '../pages/home/home'; import { TabsPage } from '../pages/tabs/tabs'; 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, AboutPage, ContactPage, HomePage, TabsPage ], imports: [ BrowserModule, IonicModule.forRoot(MyApp), HttpClientModule ], bootstrap: [IonicApp], entryComponents: [ MyApp, AboutPage, ContactPage, HomePage, TabsPage ], 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 |
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 { TabsPage } from '../pages/tabs/tabs'; import { MenuProvider } from '../providers/menu/menu'; @Component({ templateUrl: 'app.html' }) export class MyApp { @ViewChild(Nav) nav: Nav; rootPage: any = TabsPage; pages: any; selectedMenu: any; constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, public menuProvider: MenuProvider, public menuCtrl: MenuController) { 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(); statusBar.styleDefault(); splashScreen.hide(); }); } getSideMenuData() { this.pages = this.menuProvider.getSideMenus(); } openPage(page, index) { if (page.component) { let params = {}; if (page.index) { params = { tabIndex: page.index }; } this.nav.setRoot(page.component, params); 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 38 39 |
<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> <ion-icon [name]="p.icon" *ngIf="!(p.subPages)" item-left></ion-icon> <ion-icon [name]="selectedMenu == i? 'arrow-up' : 'arrow-down'" *ngIf="p.subPages" item-left></ion-icon> {{p.title}} </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"> <ion-icon [name]="subPage.icon" item-left></ion-icon> <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/tabs/tabs.html
1 2 3 4 5 |
<ion-tabs [selectedIndex]="selectedIndex"> <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab> <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab> <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab> </ion-tabs> |
src/pages/tabs/tabs.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import { Component } from '@angular/core'; import { NavParams } from 'ionic-angular'; import { AboutPage } from '../about/about'; import { ContactPage } from '../contact/contact'; import { HomePage } from '../home/home'; @Component({ templateUrl: 'tabs.html' }) export class TabsPage { tab1Root = HomePage; tab2Root = AboutPage; tab3Root = ContactPage; selectedIndex: any; constructor(navParams: NavParams) { this.selectedIndex = navParams.data.tabIndex || 0; } } |
src/pages/home/home.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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> <h2>Welcome to Ionic!</h2> <p> This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI. </p> <p> Take a look at the <code>src/pages/</code> directory to add or change tabs, update any existing page or create new pages. </p> </ion-content> |
src/pages/about/about.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<ion-header> <ion-navbar> <button ion-button menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title> About </ion-title> </ion-navbar> </ion-header> <ion-content padding> </ion-content> |
src/pages/contact/contact.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<ion-header> <ion-navbar> <button ion-button menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title> Contact </ion-title> </ion-navbar> </ion-header> <ion-content> <ion-list> <ion-list-header>Follow us on Twitter</ion-list-header> <ion-item> <ion-icon name="ionic" item-start></ion-icon> @ionicframework </ion-item> </ion-list> </ion-content> |