> 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行表示

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

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

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

#### 3. 展開済み

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

### データソース

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

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

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

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

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

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

### データマッピング

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

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

## スタイリング

Avonni チップコンテナコンポーネントのスタイルをカスタマイズすることは、その外観を Salesforce Experience Cloud サイト全体の美観に合わせるうえで重要です。このコンポーネントには、機能性と視覚的な魅力の両方を確保するための、詳細なカスタマイズを可能にするさまざまなスタイル設定が用意されています。

{% tabs %}
{% tab title="間隔" %}
**チップコンテナのブロック開始/終了、インライン開始/終了：**

* これらの設定は、ブロック（縦）方向およびインライン（横）方向のチップコンテナ周囲の余白を制御します。
* これらの値を調整することで、チップと他の要素の間に望ましい余白を作り、可読性とレイアウトの一貫性を向上させることができます。
  {% endtab %}

{% tab title="チップコンテナ" %}

* **背景、枠線の色、サイズ、スタイル、半径：**
  * サイトのテーマに調和する、または対比する背景色にカスタマイズできます。
  * 枠線のカスタマイズオプション（色、サイズ、スタイル、半径）により、コンテナの輪郭を制御でき、他のページ要素から際立たせたり、自然に溶け込ませたりできます。
    {% endtab %}

{% tab title="個別チップ" %}

* **ラベルのフォントサイズ、太さ、スタイル；枠線のサイズ、スタイル、半径；行の高さ：**
  * チップラベルのタイポグラフィを細かく調整して、見やすさとブランド整合性を高めます。
  * 枠線と行の高さを調整することで、各チップの視覚的な印象が高まり、より区別しやすく、操作しやすくなります。
    {% endtab %}

{% tab title="アバター" %}

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

{% tab title="バリアントスタイル" %}

* **選択したバリアントに基づいてカスタマイズ可能：**
  * チップコンテナコンポーネントはバリアントベースのスタイル設定に対応しており、選択したチップのバリアントに応じて異なるスタイルを適用できます。
  * この機能により、デザインにさらなる柔軟性と創造性を持たせることができ、各チップバリアントにコンテナ内で独自性がありながら統一感のある見た目を与えられます。
    {% endtab %}
    {% endtabs %}


---

# 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.