リスト
概要
Avonni List コンポーネントは、一連の項目やオプションを明確かつ整然と整理・表示するのに最適です。Experience Cloud サイト内での情報のナビゲーションと理解を容易にするよう設計されています。情報の一覧表示に加えて、このコンポーネントは項目を目立たせ、重要なメッセージや概念を効果的に伝えるためのさまざまなフォーマットオプションを提供します。
さらに、List コンポーネントはカスタマイズ機能を提供し、サイトのユーザーの特定のニーズに合わせて外観や機能を調整できるため、ドキュメントページにおける全体的なユーザーエクスペリエンスを最適化できます。
Avonni List は リアクティブデータコンポーネント
List の設定
特にデータソースとマッピングのセクションに関する設定手順を理解することは、List を効果的に使用するために重要です。
データソースの設定
データソースセクションは、Avonni List を Salesforce のデータに接続する場所です。データソースのオプションは二つあります。
手動データソース
データテーブルに手動でリストを入力します。
非動的なデータ、テスト、デモに最適です。
クエリ
クエリを作成して Salesforce のデータでリストを自動的に補完します。
動的、リアルタイム、大規模なデータセットに適しています。
データマッピングの構成
データマッピングセクションで定義とカスタマイズを行うことで、リストに命を吹き込みます。
「カラムを追加」ボタンをクリックして、List にラベルとして表示したいフィールドを選択します。
その後、主要データに加えて追加要素を組み込むことができます。これには画像やアバターなどのビジュアル要素、あるいは各リスト項目にさらなる文脈や詳細を提供する追加フィールドが含まれます。
外観と操作感の設定
アイテム区切り線の設定
アイテム区切り線機能は、項目間に区切りを挿入することでリストの視覚的構造を強化するよう設計されています。この属性により、リスト内の各項目がどのように他の項目と分離されるかをカスタマイズできます。
上
リスト内の各項目の上部に区切り線を配置できるようにします。
下部
各リスト項目の下部に区切り線を追加します。
上下
リスト内の各項目の上と下の両方に区切り線を配置します。
カード
各リスト項目を区切り線で分けられたカード状のコンテナ内に配置します。
レイアウトオプション
Avonni List コンポーネントのレイアウトオプションは、リスト内のデータの表示方法を定義する機能を提供します。これはデータを整理する列数を選択することで実現され、1 列から 12 列までのオプションがあります。
さらに、Avonni List コンポーネントはコンテナの画面サイズに応じた列構成を指定することで高度なカスタマイズを可能にします。この機能により、小・中・大の各スクリーンでリストの外観を正確に調整し、一貫性があり使いやすい表示を確保できます。
フィールドのレイアウトオプション
フィールド属性セクションでは、各フィールドがコンテナ内で占める列数を定義でき、リストのレイアウトと外観を細かく制御できます。
バリアントを調整する
Avonni list コンポーネントの「variant」プロパティは、フィールド情報の表示方法の外観を変更するために使用されます。以下は「variant」プロパティの利用可能な値で、それぞれ固有のスタイルを持ちます。
標準：これはラベルがフィールドの上に表示されるデフォルト設定です。ラベルとフィールド内容の明確な区別を提供する古典的で広く使われるレイアウトです。
ラベル非表示：よりミニマルなデザインにしたい場合にこのバリアントを選択します。ラベルは表示されず、よりすっきりした外観になります。これはコンテキストやプレースホルダーテキストでフィールドの目的が明確な場合や、スペースが限られている場合に適しています。
ラベルインライン：このバリアントでは、ラベルが通常フィールドの左側に横並びで配置されます。垂直方向のスペースよりも水平方向のスペースが豊富なフォームで有効な、スペース効率の高いレイアウトです。よりコンパクトなフォームデザインを実現したい場合にも有用です。
ラベルスタック：このバリアントはラベルをフィールドの真上に配置します。フィールドがフォーカスされたり入力されたりするとラベルが上に移動します。これは縦方向のスペースを節約し、クリーンで整理された美観を保つのに役立つ、モバイルインターフェースや Web アプリケーションでよく使われるモダンなデザインです。
画像オプション
その他の設定
フィルター
「フィルタリングオプション」によりフィルタメニューを追加できます。この機能を有効にすると、フィルタとして指定されたすべてのフィールドがこのポップオーバーに表示され、リストは散漫にならず集中した状態を保ちます。
ページネーション
「ページネーションオプション」エリアでは、Avonni List コンポーネント内の長いリストを小さな部分に分割できます。各ページに表示する項目数やコントロールの見た目を選択できます。これにより大規模なリストの扱いが容易になります。
検索
「検索フィールド」属性を使用して、List コンポーネント内で検索可能にするフィールドを定義し、ユーザーが必要な情報を素早く見つけられるようにします。
検索の有効化：検索機能を有効にするには、検索セクションに移動して「検索を表示」トグルをオンにします。この操作により List コンポーネント内に検索ボックスが表示されます。プレースホルダーテキストの変更や検索ボックスの位置調整などでこの機能をカスタマイズできます。
プレースホルダーテキストの設定：ユーザーを案内するためにプレースホルダーテキストを追加して検索バーをカスタマイズします。
検索バーの配置：位置属性を使用して検索バーの配置場所を設定します。オプションには以下が含まれます:
インタラクション
「クリック時セクション」は、ユーザーが項目をクリックして List コンポーネントと対話したときに何が起こるかを定義できるようにします。
List コンポーネントで利用可能なインタラクションは次の通りです:
各セクションを参照して、これらの機能の設定方法や、Avonni List コンポーネント内でエンドユーザー向けのインタラクティビティを向上させる方法について理解を深めてください。
スタイリングの外観
Experience Cloud Sites 向けの Avonni List コンポーネントは、外観に関する包括的なカスタマイズオプションを提供し、サイトの美観に完全に合わせることができます。
Avonni List でカスタマイズ可能なスタイリング属性は次のとおりです:
ボーダー： ボーダーの太さ、スタイル、および色を調整して、リストの境界を定義または強調します。
サイズ： 幅や高さを含むリストの全体サイズをカスタマイズして、レイアウトに合わせます。
間隔: リスト項目、ヘッダー、およびリスト本体間のスペースを制御して、可読性と視覚的な魅力を向上させます。
ヘッダー: タイトル、キャプション、アバターを含むヘッダーセクションのスタイルを設定して、視覚的に目立ち情報を伝えるようにします。
ヘッダータイトル: タイトルのフォント、サイズ、色をカスタマイズして、目立たせたりサイトのテーマに合わせます。
ヘッダーキャプション: ヘッダータイトルの下に表示されるキャプションのスタイルを設定して、簡潔な説明やリストに関するコンテキストを提供します。
ヘッダーアバター: 視覚的な表現やブランディングのためにヘッダーにアバターや画像を含めてスタイル設定します。
アイテム: 背景、配置、間隔など、個々のリスト項目の外観を調整します。
アイテムの垂直方向の配置: 一貫性と洗練された外観を保つために、リスト項目の垂直方向の配置を制御します。
アイテムヘッダー: リスト内のアイテムヘッダーの外観をカスタマイズして、明確な区分けと可読性を確保します。
アイテム説明: 視覚的に魅力的な方法で詳細情報を提供するために、アイテムの説明テキストのスタイルを設定します。
アイテム背景: 個々のエントリを区別または強調するために、リスト項目の背景色や画像を設定します。
アイテムフィールド: フォントや色の変更など、各アイテム内のフィールドのスタイルを設定して明確さと視覚的階層を作ります。
アイテムフィールド値: データを明確に表示するためにフィールド値のプレゼンテーションをカスタマイズします。
アイテムフィールドラベル: 値と区別して可読性を高めるためにフィールドのラベルのスタイルを設定します。
ページネーションボタン: リストをナビゲートするためのページネーションボタンのスタイルを設定して、ユーザーフレンドリーでサイトの美観に合うようにします。
フッター: リストに関連する追加情報やアクションのためにフッターセクションをカスタマイズし、全体のデザインと調和させます。
最終更新
役に立ちましたか？