# AX - タブ

## 概要

**AX - タブ** Experience Cloud コンポーネントで、Experience Sites のページ上でコンテンツをラベル付きタブに整理し、ポータルユーザがページを離れることなく異なるセクションを切り替えられるようにします。

同時にすべて表示する必要のない関連コンテンツ（複数タブにまたがる製品詳細、複数セクションのフォーム、カテゴリ別リソース、グループ化された情報など）を整理するために使用します。水平または垂直のタブレイアウトを選択し、Experience Builder でスタイリングを設定できます。

製品情報ページ、マルチステップフォーム、リソースカテゴリ、アカウントセクション、またはコンテンツを切り替え可能なビューに整理する必要があるポータルのあらゆる場所に最適です。 

{% hint style="danger" %}
このコンポーネントは [スロットを活用します](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/hajimeni/wobu#understanding-slots) 高度なカスタマイズのため、LWR サイトに最適です。Aura サイトはこのレベルのカスタマイズをサポートしていません。
{% endhint %}

## チュートリアル

近日公開

## 設定

{% tabs %}
{% tab title="🎛️ プロパティ" %}

| 名前                                   | 説明                                                            | 使用法                                                                  |
| ------------------------------------ | ------------------------------------------------------------- | -------------------------------------------------------------------- |
| **向き**                               | タブの方向を設定し、水平レイアウトか垂直レイアウトのいずれかを選択します。                         | デザイン要件に最も適した方向を選択し、ナビゲーションとコンテンツ表示のためにレイアウトを最適化してください。               |
| **スコープ化**                            | タブに対してより集中した特定のスタイル適用を行うためにスコープ化スタイリングを有効にします。                | この機能を使用すると、コンポーネントに限定されたスタイルを適用でき、他のページ要素との意図しないスタイルの競合を防げます。        |
| **スクロール可能 & スクロールボタン**               | タブをスクロール可能にし、スクロールボタンの表示を管理して、タブ数が多い場合でも簡単にナビゲートできるようにします。    | タブの量やレイアウトに基づいてスクロール機能を構成し、ユーザがすべての利用可能なタブに簡単にアクセスしてナビゲートできるようにします。  |
| **CMS コンテンツ背景画像 または コンテンツ背景画像の URL** | CMS から画像を選択するか URL を指定して、タブのコンテンツ領域の背景をカスタマイズします。             | 全体のデザインやコンテンツ表示に合う背景画像を適用して、タブの視覚的魅力を高めます。                           |
| **データソース**                           | タブラベルとコンテンツのソースを定義し、ラベル、アイコン、ツールチップなどのタブプロパティを手動で構成できるようにします。 | この機能を利用してタブデータをカスタマイズし、各タブが正確にラベル付けされ、必要に応じてアイコンやツールチップで補強されるようにします。 |
| {% endtab %}                         |                                                               |                                                                      |

{% tab title="🎨 スタイリング" %}

| 名前                    | 説明                                               |
| --------------------- | ------------------------------------------------ |
| **サイズ設定**             | タブの幅と高さを定義し、レイアウト内にシームレスに収まるようにします。              |
| **背景と境界線のスタイル**       | 色やサイズなどのオプションで背景や境界線をカスタマイズし、各タブの視覚的な区別を高めます。    |
| **タブのスタイル**           | 垂直揃え、幅、高さ、間隔などのさまざまな要素を調整して、タブの外観とレイアウトを磨きます。    |
| **ラベルおよびサブタイトルのスタイル** | タブ内のテキストの見た目を調整し、可読性と美観を高めるために色やフォントスタイルを適用します。  |
| **オーバーフローボタンのスタイル**   | オーバーフローボタンの外観をカスタマイズし、テキスト色や背景色を調整して視覚的一貫性を保ちます。 |
| {% endtab %}          |                                                  |
| {% endtabs %}         |                                                  |