ionic3 การสร้าง SideMenu (เทมเพลต blank)

สร้างโปรเจ็กส์ชื่อ blog
[code]
ionic start blog blank
[/code]

สร้างเพจชื่อ list
[code]
ionic g page list
[/code]

แก้ไขไฟล์

src/app/app.module.ts
src/app/app.components.ts
src/app/app.html
src/pages/home/home.html
src/pages/list/list.html

อ้างถึงเพจ list ที่เราเพิ่มเข้ามา
1. src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

import { BrowserModule } from '@angular/platform-browser';

import { ErrorHandler, NgModule } from '@angular/core';

import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { SplashScreen } from '@ionic-native/splash-screen';

import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

import { ListPage } from '../pages/list/list';

@NgModule({

declarations: [

MyApp,

HomePage,

ListPage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage,

ListPage

providers: [

StatusBar,

SplashScreen,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

2. src/app/app.components.ts

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } 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';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = HomePage;

  pages: Array<{ title: string, component: any }>;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    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.
      statusBar.styleDefault();
      splashScreen.hide();
    });

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Home', component: HomePage },
      { title: 'List', component: ListPage }
    ];
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }
}

import { Component, ViewChild } from '@angular/core';

import { Nav, Platform } 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';

@Component({

templateUrl: 'app.html'

})

export class MyApp {

@ViewChild(Nav) nav: Nav;

rootPage: any = HomePage;

pages: Array<{ title: string, component: any }>;

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {

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.

statusBar.styleDefault();

splashScreen.hide();

});

// used for an example of ngFor and navigation

this.pages = [

{ title: 'Home', component: HomePage },

{ title: 'List', component: ListPage }

];

}

openPage(page) {

// Reset the content nav to have just this page

// we wouldn't want the back button to show in this scenario

this.nav.setRoot(page.component);

}

บรรทัดที่ 37 : กำหนดรูท

3. src/app/app.html

<ion-menu [content]="content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
  
    <ion-content>
      <ion-list>
        <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
          {{p.title}}
        </button>
      </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>

<ion-menu [content]="content">

<ion-header>

<ion-toolbar>

<ion-title>Menu</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

<ion-list>

</button>

</ion-list>

</ion-content>

</ion-menu>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

4. src/pages/home/home.html

<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>
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
</ion-content>

<ion-header>

<ion-navbar>

<ion-icon name="menu"></ion-icon>

</button>

<ion-title>

Home

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

The world is your oyster.

<p>

If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.

</p>

</ion-content>

5. src/pages/list/list.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>List</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  List page.
</ion-content>

<ion-header>

<ion-navbar>

<ion-icon name="menu"></ion-icon>

</button>

<ion-title>List</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

List page.

</ion-content>

Link

Phaisarn Sutheebanjard

blog.phaisarn.com

ionic3 การสร้าง SideMenu (เทมเพลต blank)