Accordion
Einklappbare Inhaltsbereiche, in denen Nutzer nur den benötigten Inhalt ausklappen – ideal für FAQs, Feature-Listen und Konfigurationsoptionen.
Einklappbare Bereiche – Leser sehen die Überschrift und klappen Details aus. Unterstützt Icons, Beschreibungen und Gruppierung.
Verwenden Sie Accordions für:
- FAQs – Nutzer überfliegen Fragen und klappen Antworten aus
- Feature-Listen – Jedes Feature erhält einen Bereich mit Details
- Konfigurationsoptionen – Einstellungen nach Kategorie gruppieren
- Schritt-für-Schritt-Anleitungen mit ausklappbaren Details
Verwendung
<Accordion title="Advanced Configuration">
Optional details go here.
</Accordion>Einfaches Accordion
Dieser Inhalt bleibt verborgen, bis das Accordion ausgeklappt wird.
Sie können hier beliebige Inhalte einfügen: Text, Code, Bilder oder andere Komponenten.
<Accordion title="Click to expand">
This content is hidden until the accordion is expanded.
You can include any content here: text, code, images, or other components.
</Accordion>Mit Beschreibung
Fügen Sie mit der Eigenschaft description einen Untertitel hinzu:
Hier finden Sie die Dokumentation für Authentifizierungs-Endpoints der API.
<Accordion title="API Reference" description="Authentication endpoints">
Documentation for authentication API endpoints goes here.
</Accordion>Standardmäßig geöffnet
Starten Sie das Accordion ausgeklappt mit defaultOpen:
Dieses Accordion startet im geöffneten Zustand.
<Accordion title="Already Expanded" defaultOpen>
This accordion starts in the open state.
</Accordion>Mit Icon
Konfigurationsoptionen und Einstellungen.
<Accordion title="Settings" icon="gear">
Configuration options and settings.
</Accordion>Accordion oder Expandable
| Funktion | Accordion | Expandable |
|---|---|---|
| Icons | Ja | Nein |
| Beschreibungen | Ja (Untertitel) | Nein |
| Gruppierung | AccordionGroup | Eigenständig |
| Visuelles Gewicht | Schwerer, bereichsähnlich | Leichter, inline |
| Am besten geeignet für | FAQs, Feature-Listen | Ergänzende Inhalte |
Faustregel: Verwenden Sie Accordion, wenn Bereiche gleich wichtig sind und Nutzer zwischen ihnen wählen. Verwenden Sie Expandable für optionale Details, die keine visuelle Hervorhebung benötigen.
Eigenschaften
Text der Accordion-Kopfzeile.
Unter dem Titel angezeigter Untertitel.
Name des Font Awesome-Icons (z. B. "gear", "settings").
Stilvariante des Icons: light, regular oder solid.
Im ausgeklappten Zustand starten.