> ## 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-page-size-selector

> ws-page-size-selector lässt Kunden die Anzahl der Treffer pro Seite wählen und aktualisiert das Suchergebnis und die Pagination automatisch.

Die Komponente `<ws-page-size-selector>` ermöglicht die Auswahl der Anzahl der Treffer, die pro Seite angezeigt werden sollen. Sie kann sowohl für die Suchergebnisseite als auch für Kategorieseiten verwendet werden. Die Darstellung erfolgt standardmäßig über eine Dropdown-Liste.

## Komponente

Die Komponente kann wie folgt auf der Kategorie- und Suchergebnisseite eingebunden werden:

**Select-Mode**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-page-size-selector
  mode="select"
  options='[16, 32, 48]'
  class="bsp class xyz"
  select-class="form-select">
</ws-page-size-selector>
```

**Button-Mode**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-page-size-selector
  id="sizeBtn"
  mode="button"
  class="bsp class xyz"
  btn-class="button xyz"
  options='[16, 32, 48]'>
</ws-page-size-selector>
```

* **Attribute:**
  * `options`: Liste der verfügbaren Optionen für die Trefferanzahl pro Seite. (z. B. `[16, 32, 48, 64, 80]`)
  * `class`: Ermöglicht es, dem Element selbst eine Klasse zuzuweisen.
  * `mode`: Gibt an, wie die Darstellung erfolgen soll
    * `select`: Darstellung als Dropdown-Liste
      * `select-class`: Klasse für das erzeugte select-Element
    * `button`: Ein "Mehr anzeigen"-Button ohne Blättern
      * `label`: Gibt den im Button vorhandenen Text an
      * `btn-class`: Klasse für den Button

Die Komponente erzeugt den folgenden Quellcode:

**Select-Mode**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-page-size-selector type="dropdown" default="16" options="[16, 32, 48, 64, 80]" style="display: block;">
    <select>
        <option value="16" selected="">16</option>
        <option value="32">32</option>
        <option value="48">48</option>
        <option value="64">64</option>
        <option value="80">80</option>
    </select>
</ws-page-size-selector>
```

**Button-Mode**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-page-size-selector mode="button" btn-class="btn-example-class" label="Weitere Artikel laden">
  <button type="button" class="btn-example-class">
    Weitere Artikel laden
  </button>
</ws-page-size-selector>
```

## CSS & Styling

Diese Komponente generiert keine spezifischen CSS-Klassen. Das Styling kann jedoch durch zusätzliche CSS-Anweisungen im Shop-Template angepasst werden.

Innerhalb der Komponente können keine weiteren HTML-Elemente eingefügt werden.