ラベル
［ラベル］コントロールに対応したコントロールです。文字や数値の表示に関して配置する場合に使います。
Magic xpaの［ラベル］コントロールに関して設定は以下の通りなっております。
①：SmartUX側に表したいテキストを設定する
②：SmartUX側と関連するプロパティを設定する
⁂必要に応じてご活用ください。
可視
コントロールを表示させるかどうか指定します。論理値を返す式で指定す ることもできます。
有効
コントロールを有効にするかどうかを指定します。有効にするかどうかを 表す論理値を返す式を使用できます。
SmartUX側にはラベルウィジェットを使います。
ラベルウィジェットは以下のような感じになっております。
１：Magic Xpaと関連するためData Mapping入力の隣にある歯車ボタンをクリックして設定します。
設定した後は以下の通りなっております。
2：Magic Xpa側で設定したテキストを表示するために設定する
歯車ボタンをクリックして設定しま。
設定した後は以下の通りなっております。
これでMagic Xpa側とSmartUX側は連携取れた状態になります。
Magic Xpa側で”可視”プロパティを設定した場合は、SmartUX側で以下の通りに設定をします。
歯車ボタンをクリックして設定しま。
設定した後は以下の通りなっております。
コンポーネント［ラベル］を配置すると、デフォルトで以下のコードが定義されます。
|
<label data-comp-id="label.1" id="label.1">Label:</label> |
日付のYYYY/MM/DD形式や数値のカンマ区切りに関しては以下のパイプ(PIPE)の使い方を参照してください。
1. 日付のフォーマット（YYYY/MM/DD形式）
{{ myDate | date:'yyyy/MM/dd' }} とすることで、日付を「YYYY/MM/DD」形式に変換できます。
2. 数値のフォーマット（カンマ区切り）
{{ myNumber | number:'1.0-0' }} とすることで、数値をカンマ区切りにフォーマットできます。
以下のプロパティがあります
| ブレークポイント | 内容 |
| Data Mapping | Magic プログラムで定義されたコントロールを指定します。 歯車ボタンをクリックするとコントロール一覧が表示されます。 ここから選択することができます。 Magicの項目とマッピングしてクリックイベントなどをMagic側に渡します。 |
| Text | コントロールに表示されるテキストを指定します。 歯車ボタンをクリックするとダイアログ一覧が表示されます。 または、このように値を設定します。 {{ mg.getValue(mgc.XXXXXXXXXX) }} テーブルなど明細行にある場合は {{ mg.getValue(mgc.XXXXXXXXXX, row.rowId) }} とします。 |
| is inside Table | テーブル内に配置する場合はチェックをつけます。 追加することで [rowId]="row.rowId" タグが追加されます。 テーブル内にあるのにチェックをつけなかった場合は 常に1行目のイベントとして取り扱われます。 |
| Is Visible | mg.getVisible(mgc.XXXXXXXXX) を設定することでMagicのコントロールの［可視］プロパティと連携されます。 |
| Show Control | コントロールを表示するかどうかを指定します。 以下から選択できます。 “Is Inside Table” がチェックされている場合のみ有効です。
|
| Display If | コントロールを表示させるかどうか指定します。 Is Visibleと似ていますが論理型の式を設定し、True/Falseで指定します。 例：mg.getValue(mgc.XXXXXXXXXX) != "" と入力すると、XXXXXXXXXXが空白以外の場合はTrueとなり表示されます。 |
| Text Wrap | テキスト表示を折り返すかどうかを指定します。 以下から選択できます。
|
| tooltip | コントロールに関連付けるツールチップを指定します。 マウスカーソルをこのコントロールに置くと指定された文字が表示されます。 歯車ボタンをクリックするとダイアログが表示されます。 表示するテキストを入力したり、Angular関数を選択することができます。 mg.getTitle(mgc.XXXXXXXXXX) にてMagicで設定されたツールチップを表示させることが可能です。 |
| Text Transformation | テキストの変換方法を指定します。以下から選択できます。
|
| Dropdown Type | ドロップダウンの表示タイプを以下から指定します。
|
コメント
0件のコメント
サインインしてコメントを残してください。