Zum Hauptinhalt springen

Aufklappbare Bereiche (Details)

Aufklappbare Bereiche sind sinnvoll, wenn Zusatzinformationen die Seite sonst unübersichtlich machen würden.

Empfehlung​

  • Nutzen Sie <details> für einfache Inhalte, wenn das Standard-Design des Browsers ausreicht
  • Nutzen Sie @theme/Details, wenn die Darstellung konsistent zum Docusaurus-Theme sein soll oder wenn Sie Styling über className steuern möchten (z. B. fitko_details)

Variante 1: HTML <details>​

Quelltext:

<details>
<summary>Passwort vergessen – was tun?</summary>

Nutzen Sie zuerst die „Passwort vergessen“-Funktion.
</details>

Ausgabe:

Passwort vergessen – was tun?

Nutzen Sie zuerst die „Passwort vergessen“-Funktion.

Variante 2: @theme/Details​

Quelltext:

import ThemeDetails from '@theme/Details'

<ThemeDetails className="fitko_details" summary="Passwort vergessen – was tun?">
  Nutzen Sie zuerst die „Passwort vergessen“-Funktion.
</ThemeDetails>

Ausgabe:

Passwort vergessen – was tun?

Nutzen Sie zuerst die „Passwort vergessen“-Funktion.

Hinweis

In manchen Setups wird das HTML-Element <details> automatisch auf @theme/Details gemappt, sobald eine gleichnamige Komponente im Scope ist. Wenn Sie beide Varianten auf derselben Seite zeigen wollen, importieren Sie @theme/Details mit Alias (z. B. ThemeDetails), damit <details> unverändert bleibt.