Ionicでモバイルアプリを作ろう!(18)ActionSheet(BottomSheet)を表示する


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

今回はActionSheet(BottomSheet)の実装を紹介します。

ActionSheet(BottomSheet)

ActionSheet(BottomSheet)は、ユーザーに機能選択したり起動する他のアプリを選択してもらう際に、画面下部ににゅっと表示するダイアログです。iOSではActionSheet、AndroidではBottomSheetと呼ばれることが多いかと思います。

左側がiOSレイアウト、右側がAndroidレイアウトです。

このようなシートを表示するために、IonicではずばりActionSheetというモジュールが用意されており、ActionSheetControllerを用いて生成することができます。

以下に上記のようなActionSheetの表示をするメソッドを示します。

  showSheet() {
    let sheet = this.actionSheetCtrl.create({
      title: 'Choice',
      buttons: [
        {
          text: 'Preview',
          handler: () => {
            console.log('Preview clicked');
          }
        },
        {
          text: 'Share',
          handler: () => {
            console.log('Share clicked');
          }
        },
        {
          text: 'Cancel',
          role:'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });

    sheet.present();
  }

ActionSheetController#createを用いてActionSheetのインスタンスを取得し、ActionSheetのpresentメソッドを呼んであげればOKです。createメソッドの引数はoptionで、どのようなシートを生成するかの定義を行います。

ポイントはbuttonsに指定する配列ですね。配列の各要素であるbuttonオブジェクトは、テキストを指定するtext、ボタンが押された時のコールバックメソッドを指定するhandlerをプロパティとして持つことができます。他にアイコンを指定するiconプロパティ、キャンセル機能などを指定するroleプロパティがあります。

  • このエントリーをはてなブックマークに追加

PAGE TOP