> 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-de/experience-components/ax-tabs.md).

# AX - Tabs

## Übersicht

**AX - Tabs** ist eine Experience-Cloud-Komponente, die Inhalte auf Experience-Sites-Seiten in beschrifteten Tabs organisiert und es Portalbenutzern ermöglicht, zwischen verschiedenen Bereichen zu wechseln, ohne die Seite zu verlassen.

Verwenden Sie sie, um zusammengehörige Inhalte zu organisieren, die nicht alle gleichzeitig sichtbar sein müssen – etwa Produktdetails über mehrere Tabs hinweg, Formulare mit mehreren Abschnitten, kategorisierte Ressourcen oder gruppierte Informationen. Wählen Sie horizontale oder vertikale Tab-Layouts und konfigurieren Sie das Styling in Experience Builder.

Perfekt für Produktinformationsseiten, mehrstufige Formulare, Ressourcenkategorien, Kontobereiche oder überall dort, wo Ihr Portal Inhalte in umschaltbare Ansichten organisieren muss.

{% hint style="danger" %}
Diese Komponente [nutzt Slots](/experience-cloud/experience-cloud-de/erste-schritte/learning-the-basics.md#understanding-slots) für erweiterte Anpassungen und ist damit ideal für LWR-Websites. Aura-Websites unterstützen dieses Maß an Anpassung nicht.
{% endhint %}

## Konfiguration

### Datenquelle

Die Tab-Schaltflächen stammen aus der **Elemente** Datenquelle. Es können bis zu 10 Tabs vorhanden sein, und der Inhalt jedes Tabs gehört in den passenden Inhaltsplatz (`content-1` für das erste Element, `content-2` für das zweite usw.).

| Typ der Datenquelle | Beschreibung                                                         | Anwendungsfall                                                      |
| ------------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------- |
| **Manuell**         | Geben Sie jeden Tab direkt im Builder ein.                           | Ein fester Satz von Tabs, was der übliche Fall für Slot-Inhalt ist. |
| **Abfrage**         | Erstellen Sie die Tabs aus den Datensätzen eines Salesforce-Objekts. | Tabs, die Ihren Daten folgen, z. B. ein Tab pro Kategorie.          |

Jeder Tab erhält ein **Beschriftung**, eine **Tooltip** wird beim Darüberfahren angezeigt, und ein **Untertitel** unter der Beschriftung angezeigt. **Name des linken Symbols**, **Name des rechten Symbols** und **Name des oberen Symbols** platzieren Sie ein Lightning Design System-Symbol neben oder über der Beschriftung, jeweils mit einem eigenen **Größe des linken Symbols** / **Größe des rechten Symbols** / **Größe des oberen Symbols** (`XXS`, `XS`, `Klein`, `Mittel` oder `Groß`).

Mit einer **Manuell** Quelle, **Standard** markiert den Tab, der beim Laden der Seite ausgewählt ist. Mit einer **Abfrage** Quelle trägt jeder Tab außerdem eine eindeutige **Wert**, und **Deaktiviert** und **Ausgeblendet** steuern Sie, ob Nutzer damit interagieren können und ob es überhaupt angezeigt wird.

### Eigenschaften

**Ausrichtung** legt das Layout der Tabs fest — `Horizontal` (der Standard) oder `Vertikal` — und optimiert es für die Benutzernavigation und die Sichtbarkeit der Inhalte.

**Bereichsbezogen** ermöglicht bereichsbezogenes Styling, sodass die Stile auf die Komponente beschränkt bleiben und unbeabsichtigte Konflikte mit anderen Seitenelementen vermieden werden.

**Scrollfähig** macht die Tabs scrollfähig, und **Scroll-Buttons anzeigen** und **Scroll-Buttons auf Mobilgeräten anzeigen** steuern die Sichtbarkeit der Scroll-Buttons auf Desktop und Mobilgeräten und sorgen so auch bei einer größeren Anzahl von Tabs für eine einfache Navigation.

**CMS-Hintergrundbild des Inhalts** und **URL oder Ausdruck für das Hintergrundbild des Inhalts** Passen Sie den Hintergrund des Tab-Inhaltsbereichs an, indem Sie ein Bild aus dem CMS auswählen oder eine URL angeben; **Farbüberlagerung des Inhalts** legt darüber eine Farbüberlagerung für bessere Lesbarkeit.

## Formatierung

{% tabs %}
{% tab title="Größeneinstellungen" %}
Definieren Sie die Breite und Höhe der Tabs, damit sie nahtlos in Ihr Layout passen.
{% endtab %}

{% tab title="Hintergrund- und Rahmenstile" %}
Passen Sie Hintergründe und Rahmen mit Optionen wie Farben und Größen an und heben Sie so jeden Tab visuell hervor.
{% endtab %}

{% tab title="Tab-Stile" %}
Passen Sie verschiedene Aspekte wie vertikale Ausrichtung, Breite, Höhe und Abstände an, um das Erscheinungsbild und Layout der Tabs zu verfeinern.
{% endtab %}

{% tab title="Stile für Beschriftung und Untertitel" %}
Passen Sie das Erscheinungsbild des Textes in den Tabs an, indem Sie Farben und Schriftstile verwenden, um Lesbarkeit und Ästhetik zu verbessern.
{% endtab %}

{% tab title="Stile der Überlauf-Schaltfläche" %}
Passen Sie das Erscheinungsbild der Überlauf-Schaltfläche an und ändern Sie Text- und Hintergrundfarben für visuelle Konsistenz.
{% 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-tabs.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.