> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-chip-container.md).

# AX - チップコンテナー

## 概要

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

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

フィルターの選択、タグの表示、スキルバッジ、カテゴリリスト、またはポータルユーザーが複数の関連項目を省スペースで確認し操作する必要があるあらゆる場面に最適です。

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

### 一般設定

#### 1. 単一行

* **機能:** チップを1行で表示するか、複数行に折り返せるかを決定します。
* **使用方法:** コンパクトなレイアウトを維持したい場合や、より多くのチップを収めたい場合に便利です。

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

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

#### 3. 展開済み

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

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

Avonni チップコンテナーには、データ統合の主な方法として、手動入力とクエリデータソースの2つがあります。各方法はそれぞれ異なる目的に対応しており、静的なデータ表示から、Salesforce レコードからの動的なリアルタイムデータ統合まで、さまざまなシナリオに適しています。

<figure><img src="/files/3458d6983dbbc55f3972368b7242b9e0f0f5d834" alt="" width="375"><figcaption></figcaption></figure>

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

* **機能:**
  * この設定により、チップコンテナーへ直接手動でデータを入力できます。
* **使用方法:**
  * これは、チップデータが Salesforce レコードから動的に取得されない場合に特に便利です。
  * 初期設定、テスト環境、または静的データが望ましいシナリオに最適です。

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

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

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

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

* **手順:**
  * Salesforce のフィールドデータを、チップコンテナー内の対応する属性に慎重に整合させてマッピングします。この手順により、データが意味のある形で整理されて取得・表示されます。
* **結果:**
  * 適切なデータマッピングにより、Salesforce から取得したデータがチップ内で正しく表現され、意味のある文脈に沿った正確な表示が保証されます。

## スタイル設定

### 概要

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

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

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

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

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

* **背景、ボーダー色、サイズ、スタイル、角丸:**
  * サイトのテーマに調和させる、または対比させる背景色にカスタマイズできます。
  * ボーダーのカスタマイズオプション（色、サイズ、スタイル、角丸）によりコンテナーの輪郭を調整でき、他のページ要素の中で際立たせたり、自然に溶け込ませたりできます。

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

* **ラベルのフォントサイズ、太さ、スタイル; ボーダーのサイズ、スタイル、角丸; 行の高さ:**
  * チップラベルのタイポグラフィを微調整して、見やすさとブランド整合性を高めます。
  * ボーダーと行の高さを調整することで、各チップの視覚的な印象が強まり、より明確で操作しやすくなります。

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

* **ボーダーサイズ、色、スタイル; イニシャルのフォント色/太さ、アイコンの背景色、画像のオブジェクトフィット:**
  * チップ内のアバターは、サイトのデザインに合わせてスタイル設定できます。ボーダーのプロパティやイニシャルのフォント特性を調整するオプションがあります。
  * 「fill」「contain」「cover」などの「画像のオブジェクトフィット」設定は、アバター画像が歪まずに正しく表示されるようにするために重要です。

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

* **選択したバリアントに基づいてカスタマイズ可能:**
  * チップコンテナーコンポーネントは、バリアントに基づくスタイル設定を提供します。つまり、選択したチップのバリアントに応じて異なるスタイルを適用できます。
  * この機能により、デザインの柔軟性と創造性が高まり、各チップバリアントがコンテナー内で独自性を持ちながらも統一感のある見た目になります。<br>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-chip-container.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.