# AX - チップコンテナ

## 概要

**AX - チップコンテナ** Experience Cloud コンポーネントで、Experience Sites のページに対してインタラクティブなタグやラベル（チップ）のコレクションを表示します。

関連項目、カテゴリ、スキル、フィルター、または任意のグループ化されたデータを、コンパクトで視覚的な形式で表示するために使用します。ユーザーはチップを操作して選択、削除、またはアクションを起動できます。Experience Builder でコード不要でチップのスタイルと動作を設定できます。

フィルター選択、タグ表示、スキルバッジ、カテゴリ一覧、またはポータルユーザーが複数の関連項目をスペース効率よく表示・操作する必要があるあらゆる場所に最適です。

## チップコンテナの設定

### 一般設定

#### 1. 単一行

* **機能性：** チップを単一行で表示するか、複数行に折り返せるかを決定します。
* **使用法：** コンパクトなレイアウトを維持したり、より多くのチップを収めたりする場合に役立ちます。

#### 2. 折りたたみ可能か

* **機能性：** チップコンテナを折りたたみ可能にするかどうかを許可します。
* **使用法：** スペースを節約したい場合や、チップの表示・非表示を管理したいシナリオに最適です。

#### 3. 展開済みか

* **機能性：** チップコンテナの初期状態を展開に設定します。
* **使用法：** 読み込み時にすべてのチップをユーザーに即座に表示したい場合に便利です。

### Avonni チップコンテナのデータソース設定

Avonni チップコンテナは、手動入力とクエリデータソースの2つの主要なデータ統合方法を提供します。各方法は、静的データ表示から Salesforce レコードからの動的かつリアルタイムなデータ統合まで、異なるシナリオに適しています。 

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fhi5tQMcvdsbVfS66fhMi%2F2023-12-30_11-42-13.png?alt=media&#x26;token=bcf23097-139d-454d-a108-68a0cd00e537" alt="" width="375"><figcaption></figcaption></figure>

#### 手動データソース

* **機能性：**
  * この設定は、チップコンテナへの直接かつ手動のデータ入力を可能にします。
* **使用法：**
  * チップのデータが Salesforce レコードから動的に取得されない場合に特に有用です。
  * 初期設定、テスト環境、または静的データが好まれるシナリオに理想的です。

#### クエリデータソース

* **機能性：**
  * クエリオプションを使用すると、チップコンテナが Salesforce レコードから自動的にデータを取得して表示できます。
* **使用法：**
  * チップを Salesforce からの最新情報で動的に補充する必要がある場合に最適です。
  * リアルタイムのデータ反映を促進し、アクティブでデータ駆動型のサイトに優れた選択肢となります。

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

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

* **プロセス：**
  * Salesforce のフィールドデータをチップコンテナ内の対応する属性に慎重に整合させ、マッピングすることを含みます。このステップにより、データが意味を持って整理されて取得・表示されます。
* **成果：**
  * 適切なデータマッピングにより、Salesforce から取得されたデータがチップ内で正しく表現され、意味的かつ文脈に合った表示が保証されます。

## スタイリング設定

### 概要

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

### スペーシングオプション

**チップコンテナ ブロック開始/終了、インライン開始/終了：**

* これらの設定は、ブロック（垂直）およびインライン（水平）方向におけるチップコンテナ周辺のスペースを制御します。
* これらの値を調整することで、チップと他の要素との間に望ましい視覚的な余白を作り、可読性とレイアウトの一貫性を向上させることができます。

#### チップコンテナのスタイリング

* **背景、境界線の色、サイズ、スタイル、半径：**
  * サイトのテーマに合わせるか対比させるために背景色をカスタマイズします。
  * 境界線のカスタマイズオプション（色、サイズ、スタイル、半径）は、コンテナの輪郭を制御し、他のページ要素と目立たせるか、シームレスに溶け込ませるかを選択できます。

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

* **ラベルのフォントサイズ、ウェイト、スタイル；境界線のサイズ、スタイル、半径；行間：**
  * チップラベルのタイポグラフィを調整して、明瞭さとブランドの整合性を高めます。
  * 境界線と行間の調整により、各チップの視覚的インパクトが向上し、より識別しやすく、操作しやすくなります。

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

* **境界線のサイズ、色、スタイル；イニシャルのフォント色/ウェイト、アイコンの背景色、画像のオブジェクトフィット：**
  * チップ内のアバターはサイトのデザインに合わせてスタイリングでき、境界線プロパティやイニシャルのフォント特性を調整するオプションがあります。
  * 「Image Object Fit」の設定（fill、contain、cover など）は、アバター画像が歪みなく正しく表示されることを保証するために重要です。

#### バリアントスタイル設定

* **選択されたバリアントに基づいてカスタマイズ可能：**
  * チップコンテナコンポーネントはバリアントベースのスタイリングを提供しており、選択したチップのバリアントに応じて異なるスタイルを適用できます。
  * この機能により、各チップバリアントがコンテナ内で一貫性を保ちつつ独自の外観を持てるようになり、デザインの柔軟性と創造性が高まります。<br>