> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# ws-search-result-tabs

> ws-search-result-tabs erzeugt eine Tab-Navigation für Suchergebnisse aus verschiedenen Quellen (Produkte, Kategorien, Content) mit steuerbarem Auswahlverhalten.

Die Komponente `<ws-search-result-tabs>` stellt eine Tab-Navigation für Suchergebnisse aus verschiedenen Quellen (beispielsweise Produkte, Kategorien, Content) bereit. Die Tabs werden automatisch aus den eingebetteten `<ws-search-result>`-Instanzen generiert. Das Auswahl- und Anzeigeverhalten bei leeren Ergebnissen kann über Attribute gesteuert werden.

## Voraussetzung

* Die `<ws-search-result>`-Instanzen müssen als Kindelemente innerhalb von `<ws-search-result-tabs>` liegen.
* JavaScript-Bundle `ws-search-component-<Versionsnummer>.js` ab Version **1.9.1**

## Komponente

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-search-result-tabs
  container-class="btn-group w-100"
  btn-class="btn btn-primary"
  content-class="tab-content mt-4"
  pane-class="tab-pane fade"
  default-tab="product,content"
  on-empty="skip"
  empty-tab="disabled">

  <template slot="tab-product">
    <div slot="label">
      <ws-search-info data-template="Produkte ({% result.product.sub_total %})"></ws-search-info>
    </div>
    <div slot="content">
      <!-- Filter/Sort Buttons nur für Product-Tab -->
      <div class="row mb-3">...</div>
    </div>
  </template>

  <template slot="tab-category">
    <div slot="label">
      <ws-search-info data-template="Kategorien ({% result.category.sub_total %})"></ws-search-info>
    </div>
  </template>

  <!-- content_static und content_blog in einen gemeinsamen Tab "content" bündeln -->
  <template slot="tab-content">
    <div slot="label">
      <ws-search-info source="content" data-template="Inhalte ({% result.total %})"></ws-search-info>
    </div>
  </template>

  <ws-search-result source="product" class="row"></ws-search-result>
  <ws-search-result source="category" class="row"></ws-search-result>
  <ws-search-result source="content_static" tab="content" class="row"></ws-search-result>
  <ws-search-result source="content_blog"   tab="content" class="row"></ws-search-result>

</ws-search-result-tabs>
```

* **Attribute**
  * `container-class`: CSS-Klassen für den Tab-Button-Container.
  * `btn-class`: CSS-Klassen für die Tab-Buttons.
  * `content-class`: CSS-Klassen für den Tab-Content-Container.
  * `pane-class`: CSS-Klassen für die einzelnen Tab-Panes.
  * `default-tab`: Bestimmt, welcher Tab nach einer Suche geöffnet wird:
    * `sticky`: Der zuletzt geöffnete Tab. (Default)
    * `first`: Immer der erste Tab.
    * `<source>`: Eine Source oder komma-separierte Source-Liste, z.B. `default-tab="product"` oder `default-tab="product,content"`. Bei mehreren Sources wird der erste Tab mit Ergebnissen gewählt.
  * `on-empty`: Steuert das Auswahlverhalten, wenn der über `default-tab` gewählte Tab leer ist:
    * `skip`: Springt zum ersten Tab mit Ergebnissen. (Default)
    * `show`: Der gewählte Tab bleibt aktiv, auch wenn er leer ist.
  * `empty-tab`: Bestimmt, was mit leeren Tabs passiert:
    * `disabled`: Tabs bleiben sichtbar, sind aber nicht mehr auswählbar (inaktiv). (Default)
    * `enabled`: Tabs bleiben sichtbar und sind weiterhin auswählbar.
    * `hidden`: Tabs werden ausgeblendet.

### Attribut `tab` an `ws-search-result`

Ohne weitere Angabe bildet jede Instanz von `<ws-search-result>` einen eigenen Tab. Der Tab-Name entspricht dabei der Quelle ( `source`). Über das Attribut `tab` an `<ws-search-result>` können mehrere Instanzen in einem gemeinsamen Tab gebündelt werden.  Im obigen Beispiel werden `content_static` und `content_blog` zum Tab `content` zusammengefasst.

## Tab-Templates

Für jeden Tab kann ein `<template slot="tab-<tabname>">` definiert werden:

* `<div slot="label">`: **Pflicht.** Inhalt des Tab-Buttons. Für dynamische Trefferzahlen im Label kann [ws-search-info](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-search-info) verwendet werden.
* `<div slot="content">`: Optional. Zusätzlicher Inhalt innerhalb des Tabs, beispielsweise Filter- oder Sortier-Elemente, die nur in diesem Tab angezeigt werden sollen.

## Verhalten

* Die Tabs werden automatisch aus den `<ws-search-result>`-Kindelementen generiert.
* In den Tab-Labels kann `ws-search-info` für dynamische Trefferanzahlen verwendet werden; die Anzeige aktualisiert sich bei neuen Suchergebnissen automatisch.

<Info>
  `ws-search-result-tabs` ist ab `ws-search-component-1.9.1.js` verfügbar und ersetzt selbstgebaute Tab-Navigationen (z.B. über Buttons mit `hide-with` bzw. `visibility` und `total-container`-Labels).
</Info>