イメージ

イメージコンポーネントは、ユーザーインターフェース内で画像を表示するための要素です。画像は視覚的な情報を提供するための重要な要素であり、SmartUXではイメージコンポーネントを使ってアプリケーションの見た目やユーザー体験を向上させることができます。

詳細な説明

イメージの役割
- イメージコンポーネントは、アプリケーション内で画像を表示するために使用されます。これにはロゴ、アイコン、バナー画像、製品写真などが含まれます。
画像のソース
- イメージコンポーネントは、URLやファイルパスを指定して画像を表示します。ローカルファイルやリモートサーバー上の画像も利用できます。
画像のプロパティ
- イメージのサイズ、代替テキスト（alt属性）、スタイルなど、さまざまなプロパティを設定できます。これにより、画像の表示方法やアクセシビリティを調整できます。

使いどころの例

1. ナビゲーションバーのロゴ

ウェブサイトやアプリケーションのナビゲーションバーにロゴを表示する場合、イメージコンポーネントを使用します。

2. 製品ギャラリー

オンラインストアでは、製品の写真をギャラリー形式で表示する際にイメージコンポーネントを使用します。

3. バナー画像

ウェブサイトのホームページで、特定のキャンペーンやイベントを宣伝するためにバナー画像を表示します。

4. アイコン

ユーザーインターフェースの一部としてアイコンを表示する場合、イメージコンポーネントを使用します。

イメージコンポーネントは、ユーザーインターフェース内で画像を表示するための重要な要素です。ロゴ、製品ギャラリー、バナー画像、アイコンなど、さまざまな用途で使用され、アプリケーションの視覚的な魅力とユーザー体験を向上させます。アクセシビリティや読み込みの最適化にも注意を払うことで、全てのユーザーにとって使いやすいインターフェースを提供できます。

［イメージ］コントロールに対応したコントロールです。

コンポーネントを配置すると、デフォルトで以下のコードが定義されます。

以下のプロパティがあります

プロパティ	内容
Data	Magic プログラムで定義された［イメージ］コントロールを指定します。 Magic xpaの［イメージ］コントロールの［イメージファイル］プロパティにファイル名が指定されている場合、このファイルが表示されます。デフォルトフォルダは、output<Application名<\assets\images です。歯車ボタンをクリックするとコントロール一覧が表示されます。ここから選択することができます。 Magicの項目とマッピングしてクリックイベントなどをMagic側に渡します。
Image Source	表示する画像ファイル名を指定します。歯車ボタンをクリックすると画像を選択するダイアログが表示されます。ここから、イメージを読み込むことができます。読み込まれたファイルは、output<Application名>\assets\images フォルダ内にコピーされます。
Alternative Text	イメージが表示されない場合に表示される代替テキストを指定します。
is inside Table	テーブル内に配置するかどうかを指定します。テーブル内に配置する場合はチェックをつけます。追加することで[rowId]=”row.rowId”タグが追加されます。テーブル内にあるのにチェックをつけなかった場合は常に1行目のイベントとして取り扱われます。
Disabled	無効な要素を表します。無効な要素とは、アクティブ化（選択、クリック、入力など）したりフォーカスを得たりすることができないものです。歯車ボタンをクリックするとコントロール一覧が表示されます。ここから選択することができます。 Magicの項目とマッピングしてクリックイベントなどをMagic側に渡します。
Display If	コントロールを表示させるかどうか指定します。 Is Visibleと似ていますが論理型の式を設定し、 True,Falseで指定します。他　mg.getValue(mgc.XXXXXXXXXX) !=" "　と入力するとXXXXXXXXXXが空白以外の場合はTrueになるので表示されます。
width	横幅ピクセル(px)またはautoと書きます。
height	高さピクセル(px)またはautoと書きます。
Class	任意のクラスを定義することができます。