チップコンテナー

概要

Chip Container コンポーネントは、Salesforce Experience Cloud サイト向けの重要なユーザーインターフェース要素で、一般に「チップ」と呼ばれる対話型タグやラベルのコレクションをきちんと表示および管理するように設計されています。

これにより、これらの要素の管理におけるユーザーエクスペリエンスが効率化され、レイアウトが視覚的に魅力的で使いやすいまま維持され、Experience Cloud サイトの美観と完全に一致します。

Chip Container の構成

一般設定

1. 単一行

• 機能： チップを単一行で表示するか、複数行に折り返せるかを決定します。

• 使用法： コンパクトなレイアウトを維持したり、より多くのチップを収容したりする際に便利です。

2. 折りたたみ可能か

• 機能： チップコンテナを折りたたみ可能にすることを許可します。

• 使用法： スペースを節約したい場合やチップの表示を管理したいシナリオに最適です。

3. 展開済みか

• 機能： チップコンテナの初期状態を展開に設定します。

• 使用法： 読み込み時にすべてのチップをすぐにユーザーに見せたい場合に便利です。

Avonni Chip Container のデータソース構成

Avonni Chip Container は、手動とクエリの 2 種類の主要なデータ統合方法を提供します。各方法は目的や用途に応じて異なり、静的データ表示から Salesforce レコードからの動的・リアルタイムなデータ統合まで幅広いシナリオに適しています。

手動データソース

• 機能：

  • この設定により、Chip Container への直接的で手動のデータ入力が可能になります。

• 使用法：

  • これは、チップデータが Salesforce レコードから動的に取得されない場合に特に有用です。

  • 初期セットアップ、テスト環境、または静的データが好まれるシナリオに最適です。

クエリデータソース

• 機能：

  • クエリオプションにより、Chip Container は Salesforce レコードから自動的にデータを取得して表示できます。

• 使用法：

  • チップを Salesforce の最新情報で動的に埋める必要がある場合に最適です。

  • リアルタイムのデータ反映を促進するため、アクティブでデータ駆動型のサイトに優れた選択肢です。

クエリデータソースのデータマッピング

データマッピングのプロセスは、Chip Container に表示されるデータの正確性と関連性にとって重要です。

• プロセス：

  • Salesforce のフィールドデータを Chip Container の対応する属性に注意深く整合・マッピングすることが含まれます。この手順により、データが意義のある形で取得され、整理されて表示されます。

• 成果：

  • 適切なデータマッピングにより、Salesforce から取得されたデータがチップ内で正しく表現され、意味的かつ文脈的に正確な表示が保証されます。

スタイリング設定

概要

Avonni Chip Container コンポーネントのスタイルをカスタマイズすることは、Salesforce Experience Cloud サイト全体の美観に外観を合わせる上で重要です。コンポーネントは詳細なカスタマイズを可能にするさまざまなスタイリングオプションを提供し、機能性と視覚的魅力の両方を確保します。

間隔オプション

Chip Container ブロック開始/終了、インライン開始/終了：

• これらの設定は、ブロック（垂直）およびインライン（水平）方向におけるチップコンテナの周囲の間隔を制御します。

• これらの値を調整することで、チップと他の要素との間に望ましい視覚的な余白を作り、可読性とレイアウトの一貫性を向上させるのに役立ちます。

Chip Container のスタイリング

• 背景、ボーダー色、サイズ、スタイル、半径：

  • サイトのテーマと補完または対比するように背景色をカスタマイズします。

  • ボーダーカスタマイズオプション（色、サイズ、スタイル、半径）はコンテナの輪郭を制御し、ページの他の要素と目立たせるかシームレスに溶け込ませるかを可能にします。

個々のチップのスタイリング

• ラベルのフォントサイズ、ウェイト、スタイル；ボーダーのサイズ、スタイル、半径；行の高さ：

  • チップラベルのタイポグラフィを微調整して、明瞭さとブランドの整合性を図ります。

  • ボーダーと行高さの調整により各チップの視覚的インパクトが高まり、より区別しやすく、操作しやすくなります。

チップ内のアバターのカスタマイズ

• ボーダーのサイズ、色、スタイル；イニシャルのフォント色/ウェイト、アイコンの背景色、画像のオブジェクトフィット：

  • チップ内のアバターはサイトのデザインに合わせてスタイリングでき、ボーダーのプロパティやイニシャルのフォント特性を調整するオプションがあります。

  • 'Image Object Fit' の設定（fill、contain、cover など）は、アバター画像が歪まずに正しく表示されるようにするために重要です。

バリアントスタイル設定

• 選択されたバリアントに基づいてカスタマイズ可能：

  • Chip Container コンポーネントはバリアントに基づくスタイリングを提供しており、選択されたチップのバリアントに応じて異なるスタイルを適用できます。

  • この機能により、設計における柔軟性と創造性が高まり、各チップバリアントがコンテナ内で独自かつ一貫した外観を持つことが可能になります。