【Cordova】複数選択肢のダイアログを表示できるプラグイン「cordova-plugin-actionsheet」

今回は、複数の選択肢を表示できるダイアログを実装できるプラグイン「cordova-plugin-actionsheet」のご紹介です。
ダイアログプラグインは、以前から「cordova-plugin-dialogs」を使っていたのですが、こちらのプラグインではアラートや確認のためのダイアログなど、シンプルなメッセージダイアログを表示することを前提としており、複数選択肢には対応していません。
確認ダイアログならボタンも複数登録できるのですが、デザイン的に「OK」ボタンと「キャンセル」ボタンなど、2～3個しかボタンをつ表示できません。
が、今回の「cordova-plugin-actionsheet」プラグインを使えば、複数選択肢のダイアログを表示することができます！

GitHub のページはこちらから。

GitHub – EddyVerbruggen/cordova-plugin-actionsheet: ActionSheet plugin for Cordova iOS and Android apps
https://github.com/EddyVerbruggen/cordova-plugin-actionsheet

上記のプラグインを使えば、iOS の ActionSheet や Android の複数選択肢の AlertDialog を簡単に実装することができます。

実装にはまず、プラグインのインストールを行います。
コマンドラインツールで下記のコマンドを実行してください。

cordova plugin add cordova-plugin-actionsheet --save

上記が終わったら、あとはダイアログを表示したいタイミングで下記を記述するだけでOKです。

const options = {
  androidTheme: window.plugins.actionsheet.ANDROID_THEMES.THEME_DEVICE_DEFAULT_LIGHT,
  title: '[ダイアログのタイトル]',
  subtitle: '[ダイアログのメッセージ]',
  buttonLabels: ['選択肢1', '選択肢2', '選択肢3'],
  androidEnableCancelButton : true,
  addCancelButtonWithLabel: 'Cancel',
};
const callback = function(buttonIndex) {
  console.log(buttonIndex);
};

window.plugins.actionsheet.show(options, callback);

最低限のオプションしか設定していませんが、大体こんな感じです。
なお、4行目の subtitle は、iOS のみ対応しているので、Android では表示されませんのでご注意ください。
Android と iOS の両方に実装する場合は、こちらは省略した方が良いと思います。

また、今回のサンプルコードでは実装していませんが、iOS で赤く表示される選択肢は addDestructiveButtonWithLabel で設定します。
表示されるダイアログの見た目については、GitHub のページにスクリーンショットが掲載されていますので、そちらをご参照ください。

最後に callback 関数についてですが、引数の buttonIndex には、押されたボタンが何番目かの値が入ります。
が、この時、index の値は 1 から始まります。
配列のように 0 始まりではありませんので、その点のみご注意ください。

以上、複数選択肢のダイアログを表示できるプラグイン「cordova-plugin-actionsheet」のご紹介でした。
ご参考になれば幸いです。