Expandable
Expandable bietet eine einfache Ein-/Ausblendeumschaltung für Inhalte, die Leser sehen möchten, die aber für den Hauptfluss nicht essenziell sind.
Verwende Expandable, um ausführliche API-Antworten, Schritte zur Fehlerbehebung oder ergänzende Details auszublenden, die sonst den Lesefluss unterbrechen würden. Es wird als einzelnes anklickbares Auf- und Zuklappelement dargestellt. Expandable ist schlanker als Accordion, das für gruppierte, navigierbare Abschnitte entwickelt wurde.
Verwende Expandable, wenn:
- Ergänzende Details den Haupttext unterbrechen würden
- Optionale Informationen für einige, aber nicht für alle Leser hilfreich sind
- Lange Inhalte (z. B. vollständige API-Antworten) standardmäßig eingeklappt sein sollen
Grundlegende Verwendung
<Expandable title="Show more details">
These details are hidden by default and revealed when clicked.
</Expandable>Standardmäßig geöffnet
Beginne mit ausgeklapptem Inhalt:
Dieser Abschnitt ist von Anfang an sichtbar.
<Expandable title="Expanded by default" defaultOpen>
This section starts visible.
</Expandable>Häufige Anwendungsfälle
Details zu API-Antworten
Klappe ausführliche Antworten ein, die sonst den Dokumentationsfluss unterbrechen würden:
Schritte zur Fehlerbehebung
Props
Text der Abschnittsüberschrift.
Startet ausgeklappt.
Expandable im Vergleich zu Accordion
| Funktion | Expandable | Accordion |
|---|---|---|
| Zweck | Ergänzende Inhalte ausblenden | Abschnitte von gleicher Bedeutung organisieren |
| Symbole | Nein | Ja |
| Beschreibungen | Nein | Ja (Untertitel werden unterstützt) |
| Gruppierung | Eigenständig | Kann mit AccordionGroup gruppiert werden |
| Am besten geeignet für | Optionale Details, lange Beispiele | FAQs, Feature-Listen, Navigation |
Faustregel: Wenn der Inhalt „nice to have“ ist, verwende Expandable. Wenn Nutzer zwischen Abschnitten wählen müssen, verwende Accordion.