Ionic2でハイブリッドなアプリ開発:スタイルシートをスクリプトから操作したいときはngStyleを使うと簡単

Posted on Posted in 趣味的なIT・ネットの話題

Ionic2のアプリケーションでスクリプトからスタイルシートの要素を変更したいと思い色々試行錯誤していたのですが、普通のウェブサイト構築の時に使うdocumentオブジェクトからたどる方法では上手くいきませんでした。オブジェクト自体は取得できるのですが、その先の要素指定が上手くいきません。

で、Angular2のサイトに戻ってみたらそのまんまなディレクティブがありました。

NgStyle – js

ngStyleにJSのオブジェクト形式でスタイルシートの要素を渡します。シングルクォーテーションを付けずに渡すとクラスのプロパティにバインディングされます。シングルクォーテーションをつけて文字列にするとそのままの内容でスタイルシートの要素として解釈してくれます。

ちなみに何をやりたかったかというと、画面上にボタンを配置して動的にボタンのサイズを変更したかったんです。これができるとユーザーやシチュエーションに応じてインターフェースを変更できるのでよいですね。

スクリーンショット 2016-03-23 9.26.27

ただ上手くやらないとHTMLにデザイン要素が混入して混乱しそうです。sizeとかを変数で渡すのでは無く、オブジェクトごとスクリプト側で指定して、ngStyleはidやclassを指定するようなスタイルで使用するのがよいかもしれません。


Facebooktwittergoogle_pluspinterestlinkedinmail
納得したらすぐにシェア!