Prinzipien Grundlagen Barrierefreiheit Design System Guidelines Deutsch Français Italiano English Unsere Gestaltungsprinzipien Nutzerzentriert Wiedererkennbar Inklusiv Reduziert Ganzheitlich Selbsterklärend Aufgabenorientiert Passend SBB Markenportal Logo Digitale Uhr Nutzungsrechte Basis-Farben Funktionale Farben Off-Brand Farben Icons Fahrplan-Icons Piktogramme Über Barrierefreiheit Über diesen Guide Kontakt Weitere Informationen Product Owner User Research Interaction Design Visual Design Development Content Design Testing Was ist ein Design System?​ Designing Coding FAQ Hilfe Prozess Contribution Kontakt Übersicht Basis Komponenten Übersicht Releases Design Tokens Komponenten Übersicht Basis Informationen Übersicht Basis Komponenten Sinn & Zweck Community Assets Anleitung Power-Apps Digitale Werbebanner SAP App Icons List item

Übersicht

Was macht die Komponente?

  • Darstellung von Informationen in einer Liste.

Wann soll die Komponente eingesetzt werden?

  • Innerhalb von Listen.

Regeln

  • Ein Listen-Eintrag kann als Darstellungsobjekt oder zur Navigation verwendet werden.
  • Auf Listen-Einträgen können neben Klick- auch Swipe-Interaktionen definiert werden.
  • Erste Funktion wird auf Swipe-to-left gelegt, zweite Funktion auf Swipe-to-right.

Barrierefreiheit

  • Wenn die Funktion des Eintrages nur über ein Icon Dargestellt wird, muss diese zusätzlich als Alternativtext hinterlegt werden.
Zustände und Varianten

Zustände

DIe Komponente hat folgende Zustände:

  • Default
  • Pressed
  • Disabled
  • Loading
  • Swipe left (optional)
  • Swipe right (optional)

Varianten

Die Komponente hat folgende Varianten:

  • listed / boxed
  • mit Icon / ohne Icon
  • mit Subtext / ohne Subtext
  • mit Icon rechts / ohne Icon rechts
  • mit Button / ohne Button

Listed

Default

Darstellung des List-Items in einer Liste
Darstellung des List-Items in einer Liste

ohne Icon

Darstellung des List-Items in einer Liste ohne Icon
Darstellung des List-Items in einer Liste ohne Icon

mit Subtext

Darstellung des List-Items in einer Liste mit Subtext
Darstellung des List-Items in einer Liste mit Subtext

mit Icon rechts

Darstellung des List-Items in einer Liste mit Icon rechts
Darstellung des List-Items in einer Liste mit Icon rechts

mit Button

Darstellung des List-Items in einer Liste mit Button
Darstellung des List-Items in einer Liste mit Button

Boxed

Default

Darstellung des List-Items in einer Box
Darstellung des List-Items in einer Box

ohne Icon

Darstellung des List-Items in einer Box ohne Icon
Darstellung des List-Items in einer Box ohne Icon

mit Subtext

Darstellung des List-Items in einer Box mit Subtext
Darstellung des List-Items in einer Box mit Subtext

mit Icon rechts

Darstellung des List-Items in einer Box mit Icon rechts
Darstellung des List-Items in einer Box mit Icon rechts

mit Button

Darstellung des List-Items in einer Box mit Button
Darstellung des List-Items in einer Box mit Button

Spezifikationen

Design

Impressum Kontakt Datenschutz Cookie Einstellungen