Accordion ​

Das Accordion (Akkordeon) ist ein vertikal gestapeltes Set von erweiterbaren Paneelen bzw. Detail Komponenten, bei denen jeweils nur ein Paneel erweitert werden kann.

Overview ​

Intro ​

Accordion Closed
Accordion Opened

Die Akkordeon Komponente ist ein vertikal gestapeltes Set von erweiterbaren Paneelen bzw. Detail Komponenten, bei denen jeweils nur ein Paneel erweitert werden kann. Wenn ein neues Paneel geöffnet wird, wird das zuvor geöffnete Paneel automatisch geschlossen. Dies ist nützlich, um Platz zu sparen und den Benutzer zu ermutigen, sich auf eine bestimmte Auswahl von Inhalten zu konzentrieren.

Verwendung ​

👍 Do👎 Don't
- Wenn sich die Nutzer auf kleinere Inhalte konzentrieren müssen. Inhaltliche und Bereiche, die logisch miteinander verknüpft sind, sollten in einem Paneel gruppiert werden.
- Wenn Beschriftungen sehr lang sind. Das Akkordeon ist hierbei besser geeignet als Tabs.
- Wenn ein komplexes Formular in kleinere, schrittweise Abschnitte unterteilt werden soll.		- Wenn der gesamte Inhalt des Akkordeons für den Nutzer relevant ist, um eine Entscheidung zu treffen.
- Wenn Inhalte aus mehreren Bereichen gleichzeitig angezeigt werden sollen.
- Wenn es nur ein Paneel gibt. Verwende hierfür die Details Komponente.

Guidelines ​

Varianten ​

Default Chevron ​

Das Chevron steht per default links neben dem Titel. Alle Chevron sind bei dieser Variante links zu verwenden.

Accordion Opened

Chevron Alternative ​

Das Chevron kann - wenn es der Use Case erfordert - ebenso rechts platziert sein. Alle Chevron sind bei dieser Variante konsequent rechts zu verwenden.

Accordion Right

Hierarchie & Anordnung ​

Das Akkordeon ist so aufgebaut, dass der Benutzer immer weiß, in welchem Paneel er sich befindet. Da das Akkordeon besonders kompakt ist, eignet es sich gut für eine Darstellung im Splitview.

Aufbau ​

Die Akkordeon-Komponenten besteht aus zwei Elementen :

  • Die sogenannte Zusammenfassung oder Titel (Summary) enthält den Chevron, der zeigt, ob der Inhalt auf oder zugeklappt ist.
  • Der “ Inhalt ” ist der Bereich, der sichtbar wird, wenn die die Zusammenfassung aufgeklappt ist. Dieser kann je nach Verwendung variieren.

Beschriftung ​

Jeder Titel (Summary) soll so formuliert sein, dass er den Inhalt klar und kurz zusammenfasst. Vermeide lange Titel. Die Beschriftungen aller Paneele/Titel sollen in Stil und Formatierung einheitlich sein.

Die Titel (Summary) sind stets im "Sentence Case" verfasst. Das heißt die Groß- und Kleinschreibung wird wie in einem normalen Satz verwendet. Der erste Buchstabe ist immer groß geschrieben.

Icon-Verwendung ​

Jeder Akkordeon-Titel muss ein Chevron-Icon enthalten, um den aktuellen Zustand (geöffnet/geschlossen) zu visualisieren. Platziere das Chevron-Icon standardmäßig links neben dem Titel (alternativ rechts). Füge weitere Aktionsicons wie Löschen oder Kopieren standardmäßig rechts neben dem Titel hinzu und verwende Icons aus der 'Material Icons Library'.

Verhalten ​

Einzelne Akkordeon-Paneele können die  Interaction States  Enabled und Disabled haben. Dies gilt für beide Paneel-Elemente: Titel (Summary) und Inhalt.

States ​

Es lassen sich alle relevanten Zustände - open (true) und open (false) - über die Akkordeon Komponente konfigurieren. Dabei darf immer nur ein Paneel des Akkordeons im Zustand open (true) sein.

Barrierefreiheit ​

Tastaturbedienung ​

Navigation zwischen Paneelen
 Die Nutzenden können die Pfeiltasten (Aufwärts-/Abwärtspfeil) verwenden, um zwischen den verschiedenen Paneelen zu navigieren.


Fokussierung
 Die Nutzenden können die Akkordeon-Paneele mit der Tabulatortaste ("Tab") oder der Kombination aus Hochstell- und Tabulatortaste ("Shift" + "Tab") fokussieren.

Öffnen und Schließen von Paneelen
 Ein fokussiertes Paneel kann mit der Eingabetaste ("Enter") oder der Leerzeichentaste ("Space") geöffnet oder geschlossen werden. Dies bietet mehrere Optionen für die Interaktion und berücksichtigt unterschiedliche Nutzerpräferenzen und -fähigkeiten.

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=/story/komponenten-details--details-accordion

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%252Faccordion

Code Examples ​

Install ​

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

Import ​

java
import com.vaadin.flow.component.accordion.Accordion;
import com.vaadin.flow.component.accordion.AccordionPanel;
import de.mate_ds.flow.component.componentaddons.DetailsSummary;

Variants ​

Default ​

java
DetailsSummary summary1 = new DetailsSummary();
summary1.setTitleText("First panel");
summary1.getTitle().add(new Badge("Information"), new Badge("Information"));
summary1.getAction().add(new Button(new Icon(MaterialSymbol.SymbolDelete)), new Button(new Icon(MaterialSymbol.SymbolContentCopy)));

DetailsSummary summary2 = new DetailsSummary();
summary2.setEnabled(false);
summary2.setTitleText("Disabled panel");
summary2.getTitle().add(new Badge("Information"), new Badge("Information"));
summary2.getAction().add(new Button(new Icon(MaterialSymbol.SymbolDelete)), new Button(new Icon(MaterialSymbol.SymbolContentCopy)));

Accordion accordion = new Accordion();
accordion.add(DetailsSummary.createAccordionPanel(summary1, new Span("Content")));
accordion.add(DetailsSummary.createAccordionPanel(summary2, new Span("Content")));