Expandable
Expandable blendet Zusatzdetails, lange API-Antworten und Schritte zur Fehlerbehebung hinter einem klickbaren Bereich aus, eine leichtere Alternative zu Accordion
Verwenden Sie Expandable, um lange API-Antworten, Schritte zur Fehlerbehebung oder zusätzliche Details auszublenden, die den Lesefluss unterbrechen würden. Es wird als ein klickbarer Bereich dargestellt. Es ist leichter als Accordion. Accordion eignet sich für gruppierte, navigierbare Abschnitte.
Verwenden Sie Expandable, wenn:
- Zusatzdetails den Haupttext unterbrechen würden
- Optionale Informationen einigen Lesern nützen, anderen aber nicht
- Lange Inhalte (wie vollständige API-Antworten) standardmäßig eingeklappt sein sollten
Grundlegende Verwendung
<Expandable title="Show more details">
These details are hidden by default and revealed when clicked.
</Expandable>Standardmäßig geöffnet
Standardmäßig erweitert starten:
Dieser Abschnitt ist von Beginn an sichtbar.
<Expandable title="Expanded by default" defaultOpen>
This section starts visible.
</Expandable>Häufige Anwendungsfälle
Details zu API-Antworten
Lange Antworten einklappen:
Schritte zur Fehlerbehebung
Props
Text der Abschnittsüberschrift.
Standardmäßig erweitert starten.
Expandable im Vergleich zu Accordion
| Feature | Expandable | Accordion |
|---|---|---|
| Zweck | Zusatzinhalte ausblenden | Abschnitte gleicher Wichtigkeit organisieren |
| Icons | Nein | Ja |
| Beschreibungen | Nein | Ja (Untertitel-Unterstützung) |
| Gruppierung | Eigenständig | Kann mit AccordionGroup gruppiert werden |
| Ideal für | Optionale Details, lange Beispiele | FAQs, Funktionslisten, Navigation |
Faustregel: Ist der Inhalt „nice to have", verwenden Sie Expandable. Wählen Leser zwischen Abschnitten, verwenden Sie Accordion.