Skip to main content

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

<kol-details _label="Nach Laden der Seite geschlossen">
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.
</kol-details>

Beispiel

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.

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 _label und 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

TasteFunktion
TabFokussiert die Details-Komponente.
EnterÖffnet bzw. schließt den Inhalt der Komponente.

Properties

PropertyAttributeDescriptionTypeDefault
_disabled_disabledMakes the element not focusable and ignore all events.boolean | undefinedfalse
_label (required)_labelDefines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).stringundefined
_on--Defines the callback functions for details.undefined | { onToggle?: EventValueOrEventCallback<Event, boolean> | undefined; }undefined
_open_openIf set (to true) opens/expands the element, closes if not set (or set to false).boolean | undefinedfalse

Methods

focus

focus() => Promise<void>

[DEPRECATED] Use kolFocus instead.

Returns

Type: Promise<void>

kolFocus() => Promise<void>

Returns

Type: Promise<void>

Slots

SlotDescription
Der Inhalt, der in der Detailbeschreibung angezeigt wird.

View example

Live-Editor

Beispiele