Details

Diese Dokumentation wird aktuell überarbeitet und befindet sich im Beta-Status. Inhalte können sich noch ändern.

Diese Komponente wird erneut auf Barrierefreiheit getestet. Der vollständige Test steht noch aus und kann erst nach einem abgeschlossenen Release erfolgen.

Synonyme: Disclosure, Collapse, Summary

Beschreibung: Die Details-Komponente ermöglicht es, weiterführende Informationen zunächst ausgeblendet zu halten und erst nach Klick durch die Nutzer:innen sichtbar zu machen. Sie besteht aus einer Überschrift mit Pfeil-Icon (der sich von rechts nach unten ausrichtet) und einem aufklappbaren Inhaltsbereich, der platzsparendes Arbeiten mit ergänzenden Informationen ermöglicht.

Beispiel

Darstellung der Komponente mit Beispieltext:

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.

<KolDetails _label="Weitere Informationen" >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.</KolDetails>

Barrierefreiheit

Die Details-Komponente ermöglicht barrierefreie Darstellung von Zusatzinformationen ohne Ablenkung vom Hauptinhalt.
Das Öffnen und Schließen erfolgt über die semantische HTML-Struktur der <details>-Element-Serie.
Screenreader erkennen automatisch den Zustand (geöffnet oder geschlossen) der Komponente.
Das Pfeil-Icon wird als visueller Indikator für den Zustand verwendet, über die semantische Struktur wird der Zustand auch für assistive Technologien vermittelt.

Links und Referenzen

Verwendung

Tastatursteuerung

Taste	Funktion
`Tab`	Fokussiert die Details-Komponente.
`Enter`	Öffnet oder schließt den Inhalt der Komponente.

Best Practices / Empfehlungen

Nutzen Sie die Details-Komponente, um ergänzende oder sekundäre Informationen platzsparend anzuordnen.
Setzen Sie wichtige, rechtlich relevante oder primäre Inhalte nicht ausschließlich in eingeklappte Bereiche.
Die Komponente eignet sich besonders gut für FAQ-Seiten, wobei die Frage im _label und die Antwort im Inhaltsbereich ausgegeben wird.
Verwenden Sie aussagekräftige Labels, die den Inhalt der eingeklappten Information deutlich machen.
Vermeiden Sie es, zu viele Details-Komponenten ohne Struktur zu verwenden, da dies die Übersichtlichkeit beeinträchtigt.

Anwendungsfälle

FAQ-Bereiche mit vielen Fragen und Antworten
Zusätzliche oder weiterführende Erklärungen zu wichtigen Konzepten
Ergänzende Informationen in technischer Dokumentation
Kontextabhängige Hilfe und Zusatzinformationen in Formularen
Detailansichten zu Produkteigenschaften oder Varianten

Konstruktion / Technik

Playground

<KolDetails _label="Details 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.</KolDetails>

Funktionalitäten (mit Code)

Beschriftung und Inhalt

Das Label wird über _label definiert, der Inhaltsbereich wird über den Slot befüllt.

<KolDetails _label="Details anzeigen" >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.</KolDetails>

Offener Zustand

Mit _open wird die Komponente initial geöffnet angezeigt. Im deaktivierten Zustand (_disabled) wird die Komponente nicht interaktiv.

<KolDetails _label="Details anzeigen" _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.</KolDetails>

Überschriftenstruktur

Die Überschriftenebene wird über _level (0–6) gesteuert. Wert 0 zeigt den Text als fetten Text ohne semantische Heading-Struktur.

<KolDetails _label="Details anzeigen" _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.</KolDetails>

Event-Anbindung

Für Event-Handling und Callbacks siehe .

Event	Auslöser	Value
`onToggle`	Komponente wird geöffnet/geschlossen	`boolean`

API

Overview

The Details component allows additional information to be initially shown with a short introductory text, which is only fully expanded after the user clicks on an arrow icon.

By default, the Details component is displayed as a single-line layout element consisting of an arrow icon followed by a short introductory text. The actual content is revealed below after clicking the header area. The arrow icon changes its orientation from right to down. The component can also be closed again to hide the content.

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`	--	Defines the callback functions for details.	`undefined \| { onToggle?: 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 summary/toggle button.

Returns

Type: Promise<void>

`focus() => Promise<void>`

Sets focus on the internal element.

Returns

Type: Promise<void>

Slots

Slot	Description
	The content displayed in the detail description.

Beispiel​

Barrierefreiheit​

Links und Referenzen​

Verwendung​

Tastatursteuerung​

Best Practices / Empfehlungen​

Anwendungsfälle​

Konstruktion / Technik​

Playground​

Funktionalitäten (mit Code)​

Beschriftung und Inhalt​

Offener Zustand​

Überschriftenstruktur​

Event-Anbindung​

API​

Overview​

Properties​

Methods​

click​

Returns​

focus() => Promise<void>​

Returns​

Slots​

Beispiel

Barrierefreiheit

Links und Referenzen

Verwendung

Tastatursteuerung

Best Practices / Empfehlungen

Anwendungsfälle

Konstruktion / Technik

Playground

Funktionalitäten (mit Code)

Beschriftung und Inhalt

Offener Zustand

Überschriftenstruktur

Event-Anbindung

API

Overview

Properties

Methods

click

Returns

`focus() => Promise<void>`

Returns

Slots