ionic3: การสร้าง SideMenu (tabs)

ภาพที่ 1 : เพจ Home, About และ Contact อยู่ในแทบ
ภาพที่ 2 : กดด้านบนซ้าย หรือรูทจากหน้าจอด้านซ้ายมาด้านขวา แสดงเมนู
ภาพที่ 3 : เพจ Help ไม่อยู่ในแทบ

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

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

หน้า Home, About และ Contact อยู่ในแทบ แต่หน้า Help ไม่อยู่ในแทบ

แก้ไขไฟล์

src/app/app.module.ts
src/app/app.components.ts
src/app/app.html
src/pages/home/home.html
src/pages/about/about.html
src/pages/contact/contact.html
src/pages/help/help.html
src/pages/tabs/tabs.html
src/pages/tabs/tabs.ts

1. src/app/app.module.ts

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 { HelpPage } from '../pages/help/help';

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

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

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 { HelpPage } from '../pages/help/help';

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

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

@NgModule({

declarations: [

MyApp,

AboutPage,

ContactPage,

HomePage,

TabsPage,

HelpPage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

AboutPage,

ContactPage,

HomePage,

TabsPage,

HelpPage

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 { TabsPage } from '../pages/tabs/tabs';
import { HelpPage } from '../pages/help/help';

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

  rootPage: any = TabsPage;

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

  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();
    });

    this.pages = [
      { title: 'Home', component: TabsPage, icon: "home", index: 0 },
      { title: 'About', component: TabsPage, icon: "information-circle", index: 1 },
      { title: 'Contact', component: TabsPage, icon: "contacts", index: 2 },
      { title: 'Help', component: HelpPage, icon: "help", index: 3 }
    ];
  }

  openPage(page) {
    let params = {};

    if (page.index) {
      params = { tabIndex: page.index };
    }

    console.log("params >>> ", params);
    console.log("page.index >>> ", page.index);

    this.nav.setRoot(page.component, params);
  }
}

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 { TabsPage } from '../pages/tabs/tabs';

import { HelpPage } from '../pages/help/help';

@Component({

templateUrl: 'app.html'

})

export class MyApp {

@ViewChild(Nav) nav: Nav;

rootPage: any = TabsPage;

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

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();

});

this.pages = [

{ title: 'Home', component: TabsPage, icon: "home", index: 0 },

{ title: 'About', component: TabsPage, icon: "information-circle", index: 1 },

{ title: 'Contact', component: TabsPage, icon: "contacts", index: 2 },

{ title: 'Help', component: HelpPage, icon: "help", index: 3 }

];

}

openPage(page) {

let params = {};

if (page.index) {

params = { tabIndex: page.index };

}

console.log("params >>> ", params);

console.log("page.index >>> ", page.index);

this.nav.setRoot(page.component, params);

}

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

<ion-header>

<ion-navbar>

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

5. src/pages/about/about.html

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

<ion-header>

<ion-navbar>

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

</button>

<ion-title>

About

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

</ion-content>

6. src/pages/contact/contact.html

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

<ion-header>

<ion-navbar>

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

7. src/pages/help/help.html

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

</ion-header>

<ion-content padding>

</ion-content>

<ion-header>

<ion-navbar>

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

</button>

<ion-title>help</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

</ion-content>

8. src/pages/tabs/tabs.html

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

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

9. src/pages/tabs/tabs.ts

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

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;

}

Link

menus

Phaisarn Sutheebanjard

blog.phaisarn.com

ionic3: การสร้าง SideMenu (tabs)