List

Listen dienen der kompakten Darstellung gleichartiger Einträge und unterstützen eine schnelle Orientierung innerhalb einer Datenmenge.

Overview

Hinweis:

Die Liste basiert technisch auf der Grid-Komponente. Sie ist so konfiguriert, dass sie die Funktionalität einer Liste bereitstellt. Theoretisch ist alles möglich, was auch mit dem Grid möglich ist. Unser Designsystem unterstützt jedoch nur die hier dokumentierten Aspekte.

Hinweis:

Zusätzliche Detail- oder Bearbeitungsbereiche, die neben einer Liste angezeigt werden, sind nicht Bestandteil der List-Komponente selbst. Diese werden beim Seitentyp Listenseite erläutert.

Intro

Eine Liste wird verwendet, um gleichartige Objekte übersichtlich und platzsparend darzustellen. Im Mittelpunkt steht die strukturierte Anzeige einzelner Einträge, nicht der Vergleich vieler Merkmale wie in einer Tabelle.

Die Komponente selbst zeigt Einträge in kompakter Form und kann deren Auswahl unterstützen. Weiterführende Informationen, Detailansichten oder Bearbeitungsmöglichkeiten können in der umgebenden Anwendung zusätzlich bereitgestellt werden, gehören jedoch nicht zur List-Komponente (siehe Listenseite).

Die Liste eignet sich besonders für einfache, homogene Datensätze mit wenigen relevanten Informationen pro Eintrag und für Anwendungsfälle, in denen eine flache Struktur dargestellt werden soll

SCHAUBILD LISTE

List Overview

Verwendung

👍 Do

👎 Don't

... wenn gleichartige Einträge kompakt und übersichtlich dargestellt werden sollen. ... wenn wenige Informationen pro Eintrag relevant sind und eine kompakte Darstellung ausreicht. ... wenn schnelles Navigieren zwischen Einträgen im Vordergrund steht (siehe Listenseite). ... wenn Statusinformationen zu verschiedenen Datensätzen angezeigt werden sollen ... wenn einfaches Sortieren oder Filtern ausreicht.

... wenn viele Attribute gleichzeitig verglichen werden müssen. Verwende in diesem Fall die Grid-Komponente. … wenn komplexe Filter- und Sortierfunktionen über mehrere Spalten benötigt werden. ... wenn mehrstufige oder komplexe Hierarchien dargestellt werden müssen. Nutze hierfür die Tree Grid.

Guidelines

Hinweis:

Die Liste basiert technisch auf der Grid-Komponente. Sie ist so konfiguriert, dass sie die Funktionalität einer Liste bereitstellt. Theoretisch ist alles möglich, was auch mit dem Grid möglich ist. Unser Designsystem unterstützt jedoch nur die hier dokumentierten Aspekte.

Hinweis:

Zusätzliche Detail- oder Bearbeitungsbereiche, die neben einer Liste angezeigt werden, sind nicht Bestandteil der List-Komponente selbst. Diese werden beim Seitentyp Listenseite erläutert.

Aufbau List

Grundlegender Aufbau

Die List-Komponente besteht aus einer Reihe von List Items, die vertikal untereinander angeordnet sind. Jedes List Item ist durch eine Trennlinie vom nächsten getrennt.

List Aufbau B

1. List Toolbar
2. List Item
3. Scrollbar (optional)

List Toolbar (optional)

List Toolbar Aufbau

Hinweis:

Die List Toolbar ist eine Variante der Toolbar Komponente.

Die List Toolbar befindet sich oberhalb der Liste und kann folgende Elemente enthalten:

1. Listenüberschrift mit Anzahl : Zeigt den Namen der Objektkategorie sowie die Gesamtanzahl der Einträge in Klammern an. Wenn keine Objekte vorhanden oder gefunden wurden, wird kein Zahlenwert angezeigt.
2. Suchfeld (optional) : Ermöglicht die Suche innerhalb der Liste. Die Suche wird bei jeder Änderung automatisch ausgelöst.
3. Hinzufügen-Taste (optional) : Öffnet ein Formular zum Anlegen eines neuen Eintrags.
4. Overflow-Menü (optional) : Enthält weitere generische Aktionen wie z. B. Exportieren oder Batch-Aktionen.

Die List Toolbar kann an weitere Use Cases angepasst werden und enthält Placeholder Slots für weitere Komponenten.

List Item

List Item Aufbau

Das List Item ist die Grundeinheit der Liste. Es basiert technisch auf der Grid-Komponente und verhält sich wie eine kompakt dargestellte Grid Row – mit dem Unterschied, dass die Inhalte anders angeordnet sind.

1. Divider
   
   Jedes List Item wird durch eine Trennlinie (Divider) vom nächsten Element getrennt, welches sich darunter anordnet. Der Divider ist standardmäßig immer sichtbar.
2. Multiselect-Checkbox (optional)
   
   Die Multiselect Checkbox kann optional eingeblendet werden und befindet sich ganz links und ist eine eigenständige, fokussierbare Einheit. Eine Liste mit Multi-Select Funktion hat eine Checkbox in jedem List-Item, mit der die jeweilige Zeile für Batch Aktionen ausgewählt werden kann. Die Trennung als eigene "Zelle" ist aus Barrierefreiheitsgründen erforderlich, damit die Checkbox per Tastatur separat angesteuert werden kann.
3. Main
   
   Die mittlere "Zelle" nimmt den vorhandenen Platz flexibel ein. Sie enthält intern eine vertikale Anordnung (flex-col) mit folgenden Elementen:
   
   • Title (Pflicht): Der Haupttitel bleibt immer sichtbar.
   • Visuelle Kennung (optional): Entweder ein Avatar (z. B. Profilbild) oder ein Icon – nie beides gleichzeitig.
   • Title-Badge (optional): Ein Badge direkt neben dem Titel zur Kennzeichnung eines Status oder einer Kategorie.
   • Subtitle 1 (optional): Ergänzende Information Zeile 1.
   • Subtitle 2 (optional): Ergänzende Information Zeile 1.
   • More (optional): Ausklappbarer Bereich für zusätzliche Werte oder Informationen.
4. Trailing-Badge (optional)
   
   Eine eigene "Zelle" auf der rechten Seite für eine ergänzende Statusinformation oder einen Wert.
5. Inline Aktionen (optional)
   
   Die äußerste rechte "Zelle" ist ebenfalls eine eigenständige, fokussierbare Einheit – analog zur Multiselect "Zelle" links. Die Trennung als eigene Zelle ist aus Barrierefreiheitsgründen erforderlich.

Hinweis:

Die Höhe der List Items ist nicht fest definiert. Ist der Text in Cell 2 so lang, dass ein Zeilenumbruch entsteht, wächst das List Item entsprechend in der Höhe.

Varianten/Typen

Die Varianten eines List Items sind vielfältig. Ausgehend vom Basis-List-Item können die unter „Verhalten" beschriebenen Funktionen miteinander kombiniert werden, um die Liste an die Anforderungen des jeweiligen Anwendungsfalls anzupassen. Die Funktionalitäten können beliebig miteinander kombiniert werden.

List Item Variants

Verhalten

Einfacher Klick

Ein Klick auf ein List Item selektiert dieses. Das angeklickte List Item wird visuell hervorgehoben. Ob ein erneuter Klick auf ein bereits selektiertes Element die Auswahl aufhebt, ist konfigurierbar und liegt auf Produktebene.

List Selected State (einfacher Klick)

Lazy-Loading

Lazy-Loading wird bei der Liste unterstützt. Es werden nur die für den Nutzer sichtbaren Einträge geladen; weitere Daten werden beim Scrollen nachgeladen. Dies verkürzt die Anfangsladezeit und verhindert das unnötige Laden nicht benötigter Daten.

Inline-Aktionen

Sogenannte Inline-Aktionen sind Aktionen, die auf einzelne List-Items angewendet werden können (z.B. duplizieren, löschen). Diese Aktionen sind mit einer Taste am rechten Rand des List-Items sichtbar. Ein Klick auf die Taste löst die Aktion aus. Es können bis zu zwei Inline-Aktionen nebeneinander in einer Zeile angezeigt werden.

List inline Aktionen

Tooltip

Icon-Tasten benötigen Tooltips, damit die Nutzer die Funktion der Taste besser verstehen können.

Inline Aktion Tooltip

Overflow Verhalten

Alle Inline-Aktionen befinden sich in einer Zelle am rechten Rand. Wenn mehr als zwei Inline-Aktionen vorhanden sind, werden diese mit einem vertikalen Ellipsis-Icon zusammengefasst. Ein Klick auf das Ellipsis-Icon öffnet ein Context Menu mit den jeweiligen Aktionen. Ein erneuter Klick auf das Ellipsis-Icon schließt das Context Menu. Ein Klick auf eine der Inline-Aktionen in der Liste löst die Aktion aus. Mit dem Ellipsis-Icon werden alle Aktionen zusammengefasst, d. h. es kann daneben kein weiteres Icon stehen. In der Dropdown-Liste werden keine Icons für die Aktionen angezeigt.

Inline Aktion Overflow

Da Inline-Aktionen nicht auf mehrere Datensätze gleichzeitig angewendet werden können, sollten hier nur Aktionen zum Einsatz kommen, die als Batch-Aktion keinen Sinn ergeben.

Hinweis zur Barrierefreiheit von Inline-Aktionen

Um die Barrierefreiheit zu gewährleisten, müssen alle Inline-Aktionen über die Tastatur fokussiert werden können und mit einem "aria-label" versehen werden, welches die Aktion eindeutig beschreibt.

Beispiel: Im oben visualisierten Beispiel wäre das aria-label für die Aktion "Objekt kopieren" folgendermaßen definiert: aria-label="Kopieren von xxx".

Batch-Aktionen

Lassen sich Aktionen direkt auf mehrere Objekte anwenden, dann spricht man von Batch-Aktionen. Damit Batch-Aktionen ausgeführt werden können, muss Multi-Select für die Liste aktiviert sein. Batch-Aktionen sind in der List-Toolbar auszuführen.

Batch-Aktionen

Multi-Select

Ist Multi-Select aktiviert, erhält jedes List Item eine Checkbox am linken Rand. Ein Klick auf die Checkbox selektiert das Element, ohne den aktuell angezeigten Detailbereich zu schließen oder zu wechseln.

Multiselect und Selected Item

Select-All

Eine Select-All-Checkbox oberhalb der Liste ist nicht vorgesehen. Die Funktion kann jedoch über einen Button in der List Toolbar implementiert werden.

Ausklappen (.More)

Ein Klick auf das Chevron-Icon klappt den erweiterbaren Bereich eines List Items auf oder zu. Das Auf- und Zuklappen betrifft nur das jeweilige List Item und hat keinen Einfluss auf andere Elemente der Liste.

Sortierfunktion

Eine Sortierfunktion ist innerhalb der Liste nicht vorgesehen. Wenn Sortierung benötigt wird, empfiehlt sich die Verwendung der Grid-Komponente oder eine Implementierung eines Buttons in der List Toolbar, die eine spezifische Sortierung innerhalb der Liste triggert.

Responsives Verhalten

Die List verhält sich basierend auf der Containergröße responsiv.

Empty State

Wenn keine Einträge vorhanden sind, zeigt die List die Meldung „Keine Daten verfügbar." und es wird keine Anzahl in der List Toolbar angezeigt.

Wenn die Suche keine Treffer liefert, zeigt die Liste ebenfalls die Meldung „Keine Daten verfügbar." In diesem Fall wird keine Zahl in Klammern neben der Listenüberschrift angezeigt.

Empty State

Nicht vorgesehen:

Doppelklick

Der Doppelklick ist bei der Liste nicht vorgesehen.

Gruppierung

Eine Gruppierung von Einträgen ist bei der Liste nicht vorgesehen, da die List-Komponente keine Tree-Ansicht unterstützt.

States

States

Enabled

Der Standardzustand eines List Items. Das Element kann angeklickt und die Inline-Aktionen können ausgelöst werden.

Hover

Wenn der Nutzer den Mauszeiger über ein Element bewegt, wird der Hintergrund des Elements leicht hervorgehoben.

Selected

Ein ausgewähltes (angeklicktes) Element wird mit einem blauen Hintergrund dargestellt und zeigt dessen Details im Detailbereich an. Der Selected-Zustand kann zusammen mit dem Hover-Zustand auftreten.

Nicht zu verwechseln mit Checked (Multiselect): Checked bedeutet, dass die Checkbox des Items aktiviert ist, z. B. für Batch-Aktionen. Ein Item kann checked sein ohne selected zu sein und umgekehrt.

Barrierefreiheit

Tastaturbedienung

Die List kann über die Tabulatortaste fokussiert werden. Innerhalb der List lässt sich der Fokus mit den Pfeiltasten bewegen. Ein fokussiertes List-Item kann mit der Leertaste ausgewählt werden.

Spezifische Kriterien

• Checkbox (Zelle ganz links) und Inline-Aktionen (Zelle ganz rechts) sind als eigenständige, fokussierbare Zellen umgesetzt, damit sie per Tastatur separat mit den Pfeiltasten angesteuert werden können.
• Alle Inline-Aktionen müssen ein aria-label erhalten, das den Kontext kommuniziert. Beispiel: aria-label="List Item kopieren" .
• Icon-Tasten benötigen immer einen Tooltip.

Changelog

v.X.X.X

xx