Ionic 入門

ホーム > Ionic の基礎 > アクションシートの使い方

アクションシートの使い方

ユーザーに何らかの質問に対する答えを選択してもらうには、ここで紹介するアクションシート (ActionSheet) が有効です。

上記のスクリーンショットになるサンプルコードを書いてみましょう。

まずは Ionic プロジェクトを作成します。

$ ionic start actionsheet1 blank --v2
$ cd actionsheet1
$ ionic serve

作成されたページテンプレート src/pages/home/home.htmlを次のように書き換えます。 ボタンを一つ配置して、ハンドラを設定しただけです。

<ion-header>
  <ion-navbar>
    <ion-title>
      ActionSheet 1
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <button ion-button (click)="onClick()">Button 1</button>
</ion-content>

TypeScript コードは次のようになります。

import { Component } from '@angular/core';
import { ActionSheetController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public actionSheetController: ActionSheetController) {}

  onClick(){
    let actionSheet = this.actionSheetController.create({
        title: "Where do you want to go?",
        buttons: [
          {
            text: "I hate travel",
            icon: "remove-circle",
            role: "destructive",
            handler: ()=>{
              console.log("OK");
            }
          },
          {
            text: "Los Angeles",
            icon: "aperture",
            handler: ()=>{
              console.log("You selected LA!");
            }
          },
          {
            text: "Cancel",
            icon: "close",
            role: "cancel",
            handler: ()=>{
              console.log("Cancel clicked");
            }
          }
        ]
      }
    );
    actionSheet.present();
  }
}

ActionSheetController を取り込み、ディペンデンシ・インジェクション (DI) でオブジェクトを作成します。

ActionSheetController オブジェクトの create メソッドで、アクションシートの内容を定義します。

タイトル (title) やボタンが主な内容になります。

role 設定は任意で設定できます。 destructive または cancel を指定します。cancel と指定されたボタンは一番下に表示されます。

ホーム > Ionic の基礎 > アクションシートの使い方