イラストレーション

Illustration コンポーネントは、Avonni Dynamic Components 内にあらかじめデザインされたイラストを表示できるようにします。

概要

Illustration コンポーネントは 視覚的な 要素です。主にユーザーインターフェースを強化し、視覚的に魅力的な方法で情報を伝えるために使用されます。Avonni は選択可能な組み込みイラストのライブラリを提供しています。

ユースケース

• 空の状態: データテーブルやリストに表示するデータがない場合にイラストを表示します（例: 「まだメッセージはありません」というテキスト付きの空の受信トレイのイラスト）。

• 成功／確認メッセージ: 操作が成功したことを確認するためにイラストを表示します（例: レコード保存後のチェックマークのイラスト）。

• エラー／警告メッセージ: エラーや警告の状態を視覚的に表現するためにイラストを使用します。

• 視覚的な区切り: 視覚的な興味を追加し、大量のテキストやデータのブロックを分割します。

• ブランディング: ブランドの視覚スタイルに合ったイラストを使用します。

• ページが見つかりません

イラストの設定

プロパティ

API名

Dynamic Component 内でのコンポーネントの一意の識別子。

タイトル

イラストの一部として表示される主なタイトルテキスト。これは静的テキストでも、変数・数式・コンポーネント属性などの動的値にバインドすることもできます。

コンテンツ

タイトルの下に表示される追加のテキストコンテンツで、説明やメッセージによく使用されます。これも静的または動的にできます。

バリアント

表示する特定のイラストを選択します。Avonni はそれぞれ固有の名前（例: "desert"、"empty"、"no_access" など）を持つ一連の事前設計されたイラストを提供します。利用可能なバリアントとそれに対応する画像の完全な一覧については Avonni のドキュメントを参照してください。利用可能なオプションは アクセス権を フリーフォームのテキストではなく、提供されたリストから選択する必要があります。

サイズ

イラストのサイズを制御します。一般的なオプションには次のものがあります:

• 小

• 中（Medium）

• 大

• （Avonni のバージョンによっては他のサイズオプションが利用可能な場合があります）。

Visible

表示・非表示を制御し、動的な表示と非表示をサポートします。

例

例 1: 空の状態のイラスト

1. Illustration コンポーネントをキャンバスに追加します。

2. ソースタイプを設定： バリアント を「コンテンツなし」（または空の状態に適した類似のバリアント）に設定します。

3. ソースタイプを設定： タイトル を「レコードが見つかりません」に設定します。

4. ソースタイプを設定： コンテンツ を「現在表示するレコードはありません。」に設定します。

5. サイズを設定します medium.

6. の設定 Visible Illustration コンポーネントのプロパティを動的に制御するように設定します（例: データテーブルに行がない場合にのみイラストを表示する）。

重要な考慮事項

• バリアントの選択: 次の中から選択します バリアント 伝えたいメッセージに適したものを選択してください。各バリアントの視覚例については Avonni のドキュメントを参照してください。

• タイトルとコンテンツ： タイトル および コンテンツ プロパティを使用して、ユーザーに明確で簡潔なメッセージを提供します。

• 動的テキスト: 変数、数式、およびコンポーネント属性を使用して、 タイトル および コンテンツ を動的にできます。

• アクセシビリティ: 視覚に障がいのあるユーザーを考慮してください。イラストは役立ちますが、重要な情報がテキストでも伝わるようにしてください（例: タイトル および コンテンツ プロパティを効果的に使用する）。

• サイズ: コンテキストや周囲のコンポーネントに基づいて、適切なサイズのイラストを選んでください。

まとめ

Illustration コンポーネントを使用すると、Dynamic Component の視覚を強化するための画像を追加できます。イラストコンポーネントのユースケースには、空の状態の表示、成功メッセージ、または見つからない情報の表示が含まれます。