メニューの基礎

ここでは blank テンプレートで作成した、メニューのない単純な画面に典型的なメニューを設置する方法を、順を追って示します。

まずは blank テンプレートを用いて、新規プロジェクトを作成します。プロジェクト名は menu1 とします。

$ ionic start menu1 blank --v2

プロジェクトフォルダに移動して、Android プラットフォームを追加します。

$ cd menu1
$ ionic platform add android

この時点で、画面は次のようになります。

さて、これにメニューを追加します。

まずホームページ (HomePage, 上記画面) のヘッダー部分に、メニューを開くためのトグルボタンを追加します。

HomePage のテンプレート (src/pages/home/home.html) のヘッダー内に menuToggle ディレクティブ付きのボタンを設置します。

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

<ion-content padding>
...

これでトグルボタンが表示できます。

メニュー自体は src/app/app.html に記述します。メニューは ion-menu として作成します。

<ion-menu [content]="c1">
  <ion-header>
    <ion-toolbar>
      <ion-title>My Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <button menuClose ion-item >Menu 1</button>
      <button menuClose ion-item >Menu 2</button>
      <button menuClose ion-item >Menu 3</button>
    </ion-list>
  </ion-content>
</ion-menu>
<ion-nav #c1 [root]="rootPage"></ion-nav>

メニューの出現方法は type 属性で指定できますが、プラットフォームによって適切なデフォルト値が設定されるので、特に理由がない限り余計な設定をしない方が良いでしょう。

以上でトグルボタンを押したときに、次のようなメニューが表示されます。

さて、ここまででメニューは表示できましたが、メニュー項目を押しても何もしません。そこで、３ページを新規に作成して、 Menu 1, 2, 3 それぞれで、新しく作成する FooPage, BarPage, BazPage それぞれにジャンプしましょう。

ページを作成するには次のコマンドを実行します。

$ ionic g page fooPage
$ ionic g page barPage
$ ionic g page bazPage

ボタンにイベントハンドラをセットします。

<ion-menu [content]="c1">
  <ion-header>
    <ion-toolbar>
      <ion-title>My Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <button menuClose ion-item (click)="openPage('foo')">Menu 1</button>
      <button menuClose ion-item (click)="openPage('bar')">Menu 2</button>
      <button menuClose ion-item (click)="openPage('baz')">Menu 3</button>
    </ion-list>
  </ion-content>
</ion-menu>
<ion-nav #c1 [root]="rootPage"></ion-nav>

ハンドラ自体を記述します。

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 { FooPage } from '../pages/foo-page/foo-page';
import { BarPage } from '../pages/bar-page/bar-page';
import { BazPage } from '../pages/baz-page/baz-page';

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

  rootPage:any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }

  openPage(name: string){
    switch(name){
      case 'foo':
        this.nav.setRoot(FooPage);
        break;
      case 'bar':
        this.nav.setRoot(BarPage);
        break;
      case 'baz':
        this.nav.setRoot(BazPage);
        break;
    }
  }
}

イベントハンドラの設定については、「Angular のイベントバインディング」をみてください。また、 ChildView 修飾子については「@ViewChild を用いたコンポーネント」を参考にしてください。

@ChildView で Nav を取り込んでいますが、これは ion-nav の部分です。

Nav は NavController を拡張してます。すなわち、Nav は NavController です。

また、ルートモジュールに個々のページモジュールを追加します。

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 { FooPageModule } from '../pages/foo-page/foo-page.module';
import { BarPageModule } from '../pages/bar-page/bar-page.module';
import { BazPageModule } from '../pages/baz-page/baz-page.module';

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

また、それぞれのページに HopePage に追加したのと同様にトグルボタンを設置します。

以上でメニュー項目をおしたときに、ページを遷移します。

上記が典型的なメニューの作成方法です。

ホーム » Ionic の基礎 » メニューの基礎