Accordion
Synonyme: Collapse, Aufklapp-Menü
Beschreibung: Die Accordion-Komponente gliedert Inhalte in ein- und ausklappbare Abschnitte. Sie unterstützt eine kompakte Darstellung, verbessert die Übersicht bei längeren Inhalten und erlaubt es Nutzer:innen, Details bedarfsorientiert einzublenden.
Beispiel
Darstellung der Komponente ohne optional gesetzte Felder. Code kann eingeblendet werden.
<KolAccordion _label="Accordion Element" _open={true} >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</KolAccordion>Barrierefreiheit
- Das Öffnen-/Schließen-Icon ist links ausgerichtet, um die Bedienbarkeit für Nutzer:innen mit eingeschränktem Sichtfeld zu unterstützen.
- Für die Zustände „geöffnet“ und „geschlossen“ werden die Zeichen
+und-verwendet. - Auf die Verwendung von Zeichen wie
<oder>als Statusanzeige wird bewusst verzichtet. - Die Standardansicht ist auf einen möglichst hohen Kontrast ausgelegt.
Links und Referenzen
Verwendung
Tastatursteuerung
| Taste | Funktion |
|---|---|
Tab | Springt die einzelnen Accordion-Tabs an. |
Enter | Öffnet bzw. schließt den fokussierten Accordion-Tab. |
Best Practices / Empfehlungen
- Nutzen Sie ein Accordion für ergänzende oder sekundäre Informationen, die nicht dauerhaft sichtbar sein müssen.
- Strukturieren Sie längere Inhalte in klar benannte Abschnitte und verwenden Sie prägnante Überschriften über
_label. - Setzen Sie wichtige primäre Inhalte (z. B. zentrale Handlungsaufforderungen oder rechtlich relevante Hinweise) nicht ausschließlich in eingeklappte Bereiche.
- Platzieren Sie Fehlermeldungen nicht nur innerhalb geschlossener Accordion-Bereiche.
- Verwenden Sie ein Accordion nicht als primäres Auswahl- oder Filterelement.
Anwendungsfälle
- FAQ-Bereiche mit vielen Fragen und Antworten
- Detaildarstellungen zu Eigenschaften oder Varianten eines Elements
- Gruppierung umfangreicher Formularabschnitte
- Strukturierung von Inhalten auf kleinen Bildschirmen mit begrenztem Platz
- Gliederung längerer Dokumentations- oder Einstellungsseiten
FAQ
Wann sollte ein Accordion standardmäßig geöffnet sein?
Wenn ein Inhalt voraussichtlich direkt benötigt wird, kann ein Abschnitt über _open initial geöffnet werden.
Kann ich beliebigen Inhalt im Accordion darstellen?
Ja, der Inhaltsbereich wird über den Slot bereitgestellt.
Welche Überschriftenebenen sind möglich?
Über _level sind die Ebenen 1 bis 6 verfügbar. Laut API ist zusätzlich 0 möglich.
Konstruktion / Technik
Playground
<KolAccordion _label="Accordion Element" >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</KolAccordion>Funktionalitäten (mit Code)
Basisinhalt und Beschriftung
Die sichtbare Überschrift wird über _label gesetzt. Der Inhaltsbereich wird über den Slot befüllt.
<KolAccordion _label="Accordion Element" >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</KolAccordion>Überschriftenstruktur
Die Überschriftenebene wird über _level gesteuert.
<KolAccordion _label="Accordion Element" _level={2} >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</KolAccordion>Zustandssteuerung
Das initiale Öffnen erfolgt über _open. Für den nicht interaktiven Zustand steht _disabled zur Verfügung.
<KolAccordion _label="Accordion Element" _open={true} >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</KolAccordion>Event-Anbindung
Für Event-Handling und Callbacks siehe
Beispiel für das Click-Event laut Dokumentation:
| Event | Auslöser | Value |
|---|---|---|
click | Element wird angeklickt | - |
API
Overview
The Accordion component is a collapsible menu. Clicking the header area — consisting of an icon and a heading — expands the content to reveal additional information. It is an interactive navigation element designed to present extensive content in a space-saving manner.
Accordions are used whenever content associated with a thematic heading needs to be shown or hidden. They allow more detailed information for a heading than would normally be practical, leaving it to the users to decide whether to view that information.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_disabled | _disabled | Makes the element not focusable and ignore all events. | boolean | undefined | false |
_label (required) | _label | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | string | undefined |
_level | _level | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. | 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined | 0 |
_on | -- | Gibt die EventCallback-Funktionen an. | undefined | { onClick?: EventValueOrEventCallback<MouseEvent, boolean> | undefined; } | undefined |
_open | _open | Opens/expands the element when truthy, closes/collapses when falsy. | boolean | undefined | false |
Methods
click
click() => Promise<void>
Triggers a click on the trigger button of the first section.
Returns
Type: Promise<void>
focus() => Promise<void>
Sets focus on the internal element.
Returns
Type: Promise<void>
Slots
| Slot | Description |
|---|---|
| Allows arbitrary HTML to be inserted into the content area of the accordion. |