Akkordeon
Einklappbare Inhaltsabschnitte, die Leser für Details aufklappen. Geeignet für FAQs, Funktionslisten und Konfigurationsoptionen.
Akkordeons sind einklappbare Abschnitte. Leser sehen die Überschrift und klappen sie auf, um Details zu erhalten. Ein Akkordeon kann ein Icon und eine Beschreibung haben. Außerdem lassen sich Akkordeons gruppieren.
Verwende Akkordeons, wenn:
- FAQs: Leser Fragen überfliegen und die Antworten aufklappen
- Funktionslisten: jede Funktion erhält einen Abschnitt mit Details
- Konfigurationsoptionen: Einstellungen nach Kategorie gruppieren
- Schritt-für-Schritt-Anleitungen mit aufklappbaren Details
Verwendung
<Accordion title="Advanced Configuration">
Optional details go here.
</Accordion>Einfaches Accordion
Dieser Inhalt ist verborgen, bis das Akkordeon aufgeklappt wird.
Hier kann jeder Inhalt stehen: 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üge mit der Prop description einen Untertitel hinzu:
Dokumentation für Authentifizierungs-API-Endpunkte steht hier.
<Accordion title="API Reference" description="Authentication endpoints">
Documentation for authentication API endpoints goes here.
</Accordion>Standardmäßig geöffnet
Mit defaultOpen startet das Akkordeon aufgeklappt:
Dieses Akkordeon 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
| Feature | Accordion | Expandable |
|---|---|---|
| Icons | Yes | No |
| Descriptions | Yes (subtitle) | No |
| Grouping | AccordionGroup | Standalone |
| Visual weight | Heavier, section-like | Lighter, inline |
| Best for | FAQs, feature lists | Supplementary content |
Faustregel: Verwende Accordion, wenn die Abschnitte gleich wichtig sind und Leser zwischen ihnen wählen. Verwende Expandable für „nice to have“-Details, die keine visuelle Hervorhebung brauchen.
Eigenschaften
Text der Akkordeon-Überschrift.
Untertitel unterhalb des Titels.
Font-Awesome-Icon-Name (z. B. "gear", "settings").
Icon-Stilvariante: light, regular oder solid.
Startet im aufgeklappten Zustand.