Dev Guide

Appearance

Return to top
On this page

Komponenten

Die hier aufgelisteten Anforderungen spiegeln unseren Mindestanspruch an einzelne Komponenten wieder. Abweichungen werden gesondert von uns kommuniziert.

Libraries

Projektabhängig kann eine bestehende Component Library als Basis eingesetzt werden.

Accordion

  • Die Transition ist animiert und hat ein Easing.
  • Die Höhe der jeweiligen Container ist abhängig vom Inhalt.
  • Einzelne Abschnitte einer Breadcrumb Navigation werden verlinkt oder agieren als function caller.
  • Eine Breadcrumb Navigation ist für sämtliche Viewport Sizes optimiert. Falls notwendig werden Einträge mit interaktiven Auslassungspunkten (…) zusammengefasst.

Button

  • Ein Button hat vier verschiedene States: default, hover, active, disabled.
  • Ein Button kann entweder als link oder als function caller fungieren.
  • Ein Carousel reagiert auf Touch Events. Das Event löst dabei nicht einfach nur eine Transition aus, einzelne Folien können mit dem Finger hin und herbewegt werden.
  • Ein Carousel reagiert auf Key Input, sobald das Carousel im Viewport sichtbar ist: Intersection Observer.
  • Die Transition ist animiert und hat ein Easing.
  • Es gibt eine Dot Navigation oder Slide Counter.
  • Einzelne Folien müssen in der Lage sein Bilder, HTML sowie Videos abzubilden.
  • Der Übergang zwischen der ersten und letzten Folie ist in beide Richtungen fließend.

Forms

  • Eingaben soll validiert werden: Form Validation. – Fehlermeldungen auf Grund der Validierung müssen visuell dargestellt werden. – Die Eingabe kann mit Tab navigiert und mit Enter bestätigt werden.

Input

  • Inputs haben immer ein label.
  • Falls der Input validiert wird, wird die Fehlermeldung in nächster Nähe zum Input dargestellt.

Radio Button

Checkbox

Select

Datepicker

Slider

Switch

  • Ein Slider hat vier verschiedene States: default, hover, active, disabled.
  • Ein Slider kann verschiedene Modi haben: stufenlos, abgestuft, von-bis.
  • Ein Link hat vier verschiedene States: default, hover, active, disabled.
  • Die Transition ist animiert und hat ein Easing.
  • Die Seite ist nicht scrollbar wenn ein Modal geöffnet ist.
  • click oder touchstart neben ein geöffnetes Modal schließt dieses.
  • Die Navigation ist für sämtliche Viewport Sizes optimiert, bricht kontrolliert um und ändert ihr Aussehen falls notwendig.
  • Ein Indicator hebt die aktuelle Seite hervor.

Suche

  • Die Eingabe soll validiert werden: Form Validation
  • Fehlermeldungen auf Grund der Validierung müssen visuell dargestellt werden.
  • Die Sucheingabe kann mit Enter bestätigt werden.

Tab

  • Einzelne Tabs müssen Bilder, HTML oder Video abbilden können.

Tooltip

  • Tooltips erscheinen nach Interaktion (hover, focus, touch).
  • Tooltips erscheinen immer in direkter Nähe zum assozierten Element.

Video

  • Wenn nicht anders spezifiziert, spielen Videos automatisch ab sobald sie sich in der Nähe des Viewports befinden: Intersection Observer.
  • Wenn nicht anders spezifiziert, spielen Videos in einer Endlosschleife ab.
  • Fullscreen Videos werden von der Mitte aus skaliert.