こんにちわ。
最近Appleの審査基準が厳しくなったなぁと思う今日このごろです。あと審査が遅いのもいい加減にして欲しい。
さて、みなさん、ionic2やっていますか？
今日はionic2のModal windowサイズを変更する方法を見ていきます
ionic2のモーダルはサイズが２択？
ionic2のモーダルは、スマホサイズの場合は全画面で、タブレットサイズは600px*600pxで表示されます。
全画面って、使いにくいですよね。モーダルの良さはその画面が前面に来ることで、ユーザに強制的に注意を惹かせることで操作に迷いが無くなるのに、全画面って画面が変わったようで気持ち悪い。
また、タブレットやPCで見ると、この600px*600pxって結構中途半端なサイズで、使いにくいんですよね。
もう１回り、いや二回り大きくしたいなぁと思い色々ネットを調べてみましたが、情報が古いのか、色々試してみても全部駄目でした。
この中途半端なモーダルサイズ、どうにかしたい！！！
$modal-inset-width 意外と答えは身近にあった
なんとモーダルサイズの変更は、公式サイトに遠回しに書いてありました。
公式のionic2 modal controllerに目を通すと、Sass変数という項目があります。
そこには
- $modal-inset-min-width 768px
- $modal-inset-min-height-small 600px
- $modal-inset-min-height-large 768px
- $modal-inset-width 600px
- $modal-inset-height-small 500px
- $modal-inset-height-large 600px
という表記があります。 SASSとはCSSがレベルアップしたようなものです。
でもこれ、どこで使うんやろ？？？
ionic2のテーマを変えることでモーダルウインドウのサイズが変えられる
答えはここにありました。ionic2 sass変数のオーバーライド
長いページですが、スクロールしていくと、何処かに$modal-inset-width とかいう表記があります。（通常この量をスクロールするのはしんどいので、Ctrl + Fで検索したほうがいいでしょう）
つまりテーマの設定で、モーダルウインドウのサイズが変更できます。
大きいモーダル
ionic2 modal デフォルトのサイズです。中途半端で使いにくいサイズ
ionic2 modal 画面の80%をモーダルで覆うサイズです(画面はiPadのサイズです）
では肝心のコードです
/src/theme/valiables.scss を開いて編集します
$modal-inset-width:80%; $modal-inset-height-large:80%;
この２行を追記するだけです。
ionic2はionic1 の頃に比べて公式サイトがわかりやすくなりましたね。
