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

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

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

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

NgStyle – js

<ion-content>
  <div >
    <button [ngStyle]="{'font-size': size_text, 'padding-top':'2px', 'padding-buttom':'2px'}" (click)="selectRider(j)" *ngFor="#each of registeredRiders; #j = index">{{registeredRiders[j].id}}:{{registeredRiders[j].name}}</button>
  </div>
</ion-content>

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

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

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

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


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