Onsen-UIのDialogコンポーネントサイズを変更する

TL;DR

• Onsen-UI 読み込み後に出力される Dialog をコピーして手動で使う
• Dialog 群の形だけ取得しているので、Show, Hide 共にこちら側で呼ぶ必要あり
• Onsen-UI のタグオブジェクトから、Onsen-UI 側で用意されているshow(), hide()などが呼び出せる
  • これを使って自分で制御を行う

概要

以下の画像のような、アラートのサイズを変更したいのにできない。 Onsen-UI の公式リファレンスを見ても Dialog の項目にそれっぽい動作をしてくれる Dialog はない。。

解決方法 🤗

1. ons.notification.alert();を実行して、で Onsen-UI の要素を取得する。
2. 要素を html に貼り付ける。
3. ons-alert-dialogにidをつけて、手動で Dialog の表示/非表示を制御する。

ons タグのオブジェクトを js で取得すると、show()やhide()などのメソッドが使用できるようになる。
https://onsen.io/v2/api/js/ons-modal.html#method-show

実行結果 🎥

以下の動画ではwidth="90%"で設定しています

ソースコード 📓