ウィジェットのプロパティ

ページはウィジェットで組み立てられています。ウィジェットの挙動は、そのウィジェットのプロパティで決定づけられます。コンテナに設定した任意のプロパティは、そのウィジェット固有の値で上書きしない限り、そのコンテナ内のすべてのウィジェットに適用されます。

ウィジェットのプロパティ指定

ウィジェットのプロパティを指定するには、ウィジェットを選択し、ホワイトボードの右にあるプロパティ パネルに進みます。プロパティ値には、「コンスタント」、「動的な値」、「双方向バインド」、「補完」の4つのタイプがあります。

コンスタント

コンスタントの値を要求するプロパティです。ラジオボタン、ドロップダウンリスト、数値セレクター(幅プロパティに使用)などとしてプロパティ パネルに表示されます。必要な値を選択します。

動的な値 – fx

コンスタント(デフォルト)または式を指定するには、動的な値を使用します。コンスタントから式に切り替えるには、式アイコンの fx をクリックします。式から変数名に切り替えるには、コンスタント アイコンの X をクリックします。 An expression can include a variable to make the property value dynamic, or can simply be the name of a variable. パイプを使用して変数の値にフィルターを適用することができます。変数へのバインディングは read です。変数に write したい場合は、read-write 双方向バインドを使用します。

  • ウィジェットを表示する条件を定義する例: userAge > 18
  • テーブルのヘッダーを変数の値で定義する例: myArrayVariable
  • 変数の値にフィルターを適用する例: selectedUser | json

双方向バインド – Dynamic icon

プロパティ値と変数を read-write 双方向でバインディングするには、双方向フィールドを使用します。

補完 (interpolation) – interpolation icon

ウィジェットの表示テキスト中に変数を埋め込み可能にしたい場合、この補完フィールドを使用します。この補完フィールドのテキストには、AngularJS の補完 (interpolation) で解釈される変数を含むことができ、ページが表示された時にその変数は補完された値で置き換えられます。 変数は、ダブル中括弧 {{式}} で囲んだ単純な式で指定します。

例: {{ user.name | uppercase }} さん、ごめんなさい! 残念ながら、それはできません。

共通のウィジェット プロパティ

コンテナを除くすべてのウィジェットに対しては、次のウィジェット プロパティが共通して存在します。

そのウィジェットがコンテナ内にある場合は、そのコンテナに対応する幅、コンテナ内にない場合はそのページに対応する幅を指定します。1つのウィジェットは1~12までの幅をとることができます。実際のウィジェット幅は、対比幅で、表示するデバイスによって自動調整されます。

CSS クラス

各ウィジェットに対し、1つ以上のCSS クラスを関連付けることができます(複数クラス指定の場合は、スペース区切りのリストを使用)。デフォルトで Bootstrap CSS ライブラリが使用可能になっているため、そのライブラリーに含まれる任意の CSS クラスを追加できます。

非表示

このプロパティは、ウィジェットを非表示にするかどうかをコントロールします。このプロパティを変数にバインドします。その変数値がそのウィジェットを表示するか、しないかを決定づけます。あなたは、このメカニズムを利用して表示をコントロールできます。たとえば、ユーザーがある値をフォームに入力した時、あるウィジェットが表示される場合です。