Ionicでモバイルアプリを作ろう！(16)モーダルを表示する

クロスプラットフォーム対応のモバイルアプリ開発フレームワークであるIonicの使い方を紹介します。

今回はモーダルを表示する方法を紹介します。

モーダルは現在のページに上から重なるように表示されるページで、一時的に表示するUIとして使えます。利用箇所としては、例えばオプションの選択をしてもらう場面、ログインの情報を入力をしてもらう場面、ユーザーに投稿系のコンテンツを入力してもらう場面などです。

Modalの使い方

Modalを生成するにはModalControllerを使います。DIによりコンストラクタの引数からインスタンスを取得できます。

home.tsimport { Component } from '@angular/core';
import { ModalController } from 'ionic-angular';
import { ModalPage } from '../modal/modal';
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
 
  constructor(private modalCtrl: ModalController) {
  }
 
  openModal() {
    let modal = this.modalCtrl.create(ModalPage);
    modal.present();
  }
}

home.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18	`import` `{ Component } from` `'@angular/core';` `import` `{ ModalController } from` `'ionic-angular';` `import` `{ ModalPage } from` `'../modal/modal';` `@Component({` `selector:` `'page-home',` `templateUrl:` `'home.html'` `})` `export` `class` `HomePage {` `constructor(private` `modalCtrl: ModalController) {` `}` `openModal() {` `let` `modal =` `this.modalCtrl.create(ModalPage);` `modal.present();` `}` `}`

home.html...
<ion-content padding>
  <button ion-button (click)="openModal()">SHOW MODAL</button>
</ion-content>

home.html
1 2 3 4	`...` `<ion-content` `padding>` `<button` `ion-button (click)="openModal()">SHOW MODAL</button>` `</ion-content>`

ModalController.create()によりModalインスタンスを生成し、Modal.present()により表示します。

NavController.push()の場合は、ページのスタックを元にページを戻るアローアイコンをツールバーに表示してくれるますが、Modalの場合は表示されません。よってモーダルを閉じる処理の呼び出しは自分で実装する必要があります。

以下はツールバーにキャンセルボタンを配置する例です。

modal.tsimport { Component } from '@angular/core';
import { ViewController } from 'ionic-angular';
 
@Component({
  selector: 'page-modal',
  templateUrl: 'modal.html',
})
export class ModalPage {
 
  constructor(public viewCtrl: ViewController) {
  }
 
  dismiss(){
    this.viewCtrl.dismiss();
  }
}

modal.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16	`import` `{ Component } from` `'@angular/core';` `import` `{ ViewController } from` `'ionic-angular';` `@Component({` `selector:` `'page-modal',` `templateUrl:` `'modal.html',` `})` `export` `class` `ModalPage {` `constructor(public viewCtrl: ViewController) {` `}` `dismiss(){` `this.viewCtrl.dismiss();` `}` `}`

modal.html<ion-header>
  <ion-toolbar>
    <ion-title>
      Modal
    </ion-title>
    <ion-buttons start>
      <button ion-button (click)="dismiss()">
        <span ion-text color="primary" showWhen="ios">キャンセル</span>
        <ion-icon name="md-close" showWhen="android"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
 
<ion-content padding>
  <div>
    モーダルページ
  </div>
</ion-content>

modal.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19	`<ion-header>` `<ion-toolbar>` `<ion-title>` `Modal` `</ion-title>` `<ion-buttons` `start>` `<button` `ion-button (click)="dismiss()">` `<span` `ion-text` `color="primary"` `showWhen="ios">キャンセル</span>` `<ion-icon` `name="md-close"` `showWhen="android"></ion-icon>` `</button>` `</ion-buttons>` `</ion-toolbar>` `</ion-header>` `<ion-content` `padding>` `<div>` `モーダルページ` `</div>` `</ion-content>`