Details
Synonyme: Disclosure, Collapse, Summary Detail
Mit Hilfe der Detail-Komponente können weiterführende Informationen zunächst mit einem kurzen Einleitungstext angezeigt werden, die erst nach Klick durch die Nutzer:innen auf ein Pfeil-Icon in voller Größe aufgeklappt werden.
Die Detail-Komponente stellt sich standardmäßig als einzeiliges Layout-Element dar, das aus einem Pfeil-Icon und einem nachfolgenden, kurzen Einleitungstext gebildet wird. Der eigentliche Inhalt der Komponente wird erst nach Klick auf den Kopfbereich nach unten hin geöffnet. Das Pfeil-Icon ändert dabei seine Ausrichtung von rechts nach unten. Analog lässt sich die Komponente auch wieder schließen und der Inhalt damit verbergen.
Konstruktion
Code
<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>Verwendung
Geöffnet anzeigen
Verwenden Sie das Attribut _open, um die Komponente geöffnet darzustellen.
Einleitungstext
Verwenden Sie das Attribut _label, um den Text zu definieren, der als Überschrift angezeigt werden soll.
Best practices
- Verwenden Sie die Detail-Komponente, um ergänzende Inhalte zu einem Hauptthema platzsparend anzuordnen.
- Die Detail-Komponente eignet sich gut für die Realisierung einer FAQ-Seite, wobei die Frage über das Attribut
_labelund die Antwort im Inhaltsbereich ausgegeben werden kann. - Vermeiden Sie es, wichtige Informationen, die z.B. rechtliche Aspekte betreffen, in einem verborgenen Bereich auszugeben. Es kann nicht sichergestellt werden, dass der Benutzer diese Informationen auch sicher liest.
- Vermeiden Sie es, zu viele Detail-Komponenten zu verwenden, da die Übersichtlichkeit der Seite hierunter leiden kann.
Anwendungsfälle
Details-Komponente innerhalb eines Fließtextes
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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
Barrierefreiheit
- Die Details-Komponente bietet sich an, um eine Kontext-sensitive Hilfe für die Barrierefreiheit umzusetzen.
Tastatursteuerung
| Taste | Funktion |
|---|---|
Tab | Fokussiert die Details-Komponente. |
Enter | Öffnet bzw. schließt den Inhalt der Komponente. |
Links und Referenzen
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. |