Details

Details ist ein erweiterbarer Bereich, in dem Inhalte ein- und ausgeblendet werden können, um die Benutzeroberfläche übersichtlicher zu gestalten.

Overview

Intro

Details eingeklappt

Die Details Komponente ist ein erweiterbarer Bereich, in dem Inhalte ein- und ausgeblendet werden können, um die Benutzeroberfläche übersichtlicher zu gestalten. Wir verwenden die Komponente in der Variante "Object-Header" zum Beispiel als Kopfzeile auf der Objektseite.

Befinden sich für den Nutzer wichtige Informationen im Inhaltsbereich, sollte die Details Komponente im Ausgangszustand ausgeklappt sein, um sicherzustellen, dass der Nutzer die Informationen sieht.

Ist die Komponente im Ausgangszustand eingeklappt, dürfen sich keine wichtigen Informationen im Inhaltsbereich befinden.

Verwendung

👍 Do	👎 Don't
...wenn zusammenhängende Inhalte dargestellt werden sollen, die nicht jederzeit sichtbar sein müssen. ...wenn die Informationslast reduziert werden soll.	...wenn mehrere Paneele notwendig sind, die ein- und ausgeklappt werden können. Verwende hierfür die Accordion Komponente. ...wenn die Inhalte zu jeder Zeit sichtbar sein sollten.

Guidelines

Aufbau

Details Aufbau

1. Titel mit Chevron

Der Titel beschreibt den Inhalt und ist immer sichtbar. Wenn man auf den Titel klickt, wird der Inhalt ein- und ausgeklappt. Der Chevron wird links neben dem Titel eingeblendet.

2. Jetons (Optional)

Je nach Use Case können ein oder mehrere Jetons rechts neben dem Titel eingeblendet werden, um z.B. den Status des zugehörigen Inhalts zu erläutern.

3. Icons (Optional)

Auf der rechten Seite können Icons für "Kopieren" und/oder "Löschen" eingeblendet werden.

4. Auf-/ Zuklappen (Optional)

Wird nur in Verbindung mit dem Object-Header verwendet.

5. Untertitel (Optional)

Unter dem Titel kann ein Untertitel abgebildet werden, um den Titel ergänzend zu beschreiben.

6. Inhalt

Der Inhalt ist der Teil der Komponente, der ein- und ausgeklappt werden kann. Er kann alle möglichen anderen Komponenten enthalten und kann unterschiedlich strukturiert werden.

Wenn der Inhalt eingeklappt ist, ist er nicht sichtbar und kann weder über Tastatur noch Screenreader erreicht oder gelesen werden.

Varianten

Default

Die Default Variante muss mindestens einen Titel und einen Inhalt haben. Der Untertitel, die Jetons und die Icons sind optional. Der Chevron ist links neben dem Titel verordnet.

	closed
	open

Object-Header

Diese Variante hat keinen Chevron. Stattdessen erfolgt das Auf- und Zuklappen über einen tertiary inline Button, der auf der rechten Seite verordnet ist.

Auch hier können optional Jetons hinzugefügt werden. Icons können in dieser Varianten nicht hinzugefügt werden.

	closed
	open

Verhalten

Mit einem Klick auf die Zusammenfassung wird der Inhalt auf- oder zugeklappt.

	closed
	open

States

	enabled Im enabled Zustand kann normal mit der Komponente interagiert werden. Alle anderen Komponenten, die in den Inhaltsbereich eingebettet sind, sind aktiv, sobald der Inhaltsbereich ausgeklappt ist.
	disabled Im disabled Zustand kann nicht mit der Komponente interagiert werden. Die Inhalte können nicht mehr ein- oder ausgeklappt werden. Komponenten im Inhaltsbereich sind automatisch auch disabled.

Details oder Akkordeon

Die Details Komponente bildet jeweils ein Akkordeonpanel, die aufgeklappt werden können. Ein Akkordeon setzt sich also aus mehreren Details Komponenten zusammen. „Details“ und „ Akkordeon “ haben beide die Funktion, Inhalte in kompakter Form darzustellen und sie bei Bedarf interaktiv auszuklappen. Während die Details-Komponente in erster Linie als eigenständiges Element zur Ein- und Ausblendung dient, ermöglicht das Akkordeon die koordinierte Steuerung mehrerer solcher Elemente gleichzeitig.

Details

Die Komponente ermöglicht es den Nutzenden, zusätzliche Informationen oder Inhalte durch das Klicken auf den Titelbereich anzuzeigen und zu verbergen. Sie wird häufig genutzt, um optionale oder ergänzende Informationen zu verbergen, die erst sichtbar werden, wenn der Nutzer es auswählt.

Akkordeon

Eine Kollektion von Panels, bei denen jeweils nur ein Panel gleichzeitig aufgeklappt sein kann. Wenn ein neues Panel geöffnet wird, wird das zuvor geöffnete Panel automatisch geschlossen. Dies ist nützlich, um Platz zu sparen und den Benutzer zu ermutigen, sich auf eine bestimmte Auswahl von Inhalten zu konzentrieren.

Barrierefreiheit

Über Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") ist Details fokussierbar. Mit der Eingabetaste ("Enter") oder der Leertaste kann Details ein- und ausgeklappt werden.

Über die Pfeiltaste nach rechts können die Icons innerhalb der Komponente angesteuert werden.

Durch das Drücken der Pfeiltaste nach unten können Komponenten im Inhaltsbereich angesteuert werden, falls diese vorhanden sind.

Wenn der Inhalt eingeklappt ist, ist er nicht sichtbar und kann weder über Tastatur noch Screenreader erreicht oder gelesen werden.

Develop Vue

Die Implementierung der Webcomponenten in Vue.js kann in folgendem Showcase innerhalb des AKDB Netzwerks betrachtet werden: https://mate-ds-vue-components-showcase-25.core-platform.kubt.akdb.net/?path=/docs/komponenten-details--docs

Develop Flow

Der Showcase ist innerhalb des AKDB Netzwerks zu finden unter: https://mate-ds-flow-components-showcase-25.core-platform.kubt.akdb.net/?src=component%252Fdetails

Code Examples

Install

Maven

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-details-flow</artifactId>
</dependency>
<dependency>
    <groupId>de.mate_ds</groupId>
    <artifactId>mate-component-addons-flow</artifactId>
</dependency>

Import

import com.vaadin.flow.component.details.Details;
import de.mate_ds.flow.component.componentaddons.DetailsSummary;
import de.mate_ds.flow.component.componentaddons.DetailsSummaryVariant;

Variants

Mate summary

DetailsSummary summary = new DetailsSummary();
summary.setTitleText("Title");
Details details = DetailsSummary.createDetails(summary);
details.add(new Span("Inhaltsbereich in dem beliebiger Inhalt stehen kann"));

Object header

DetailsSummary summary = new DetailsSummary();
summary.setTitleText("Title");
summary.getTitle().add(new Badge("Information"), new Badge("Information"));
summary.getAction().add(new Button(new Icon(MaterialSymbol.SymbolDelete)), new Button(new Icon(MaterialSymbol.SymbolContentCopy)));
summary.addThemeVariants(DetailsSummaryVariant.OBJECT_HEADER);
Details details = DetailsSummary.createDetails(summary);
details.add(new Span("Inhaltsbereich in dem beliebiger Inhalt stehen kann"));