Zurück zur Übersicht

Eingabe und Auswahl

Texteingabe

Texteingabe  

Abstände Texteingabe

  • Abstand vertikal (A): 0,5 rem
  • Höhe (B): 4 rem
  • Breite: variabel
  • Geschützter Bereich unten (C): 1,5 rem
  • Geschützter Bereich rechts und links (d): 1 rem
  • Rahmen: 0,1 rem

Text, der zu lang für den Bereich ist, wird abgeschnitten. Die Schrift basiert auf FontDefault. Sie ist einzeilig.

Im Zustand Normal hat das Texteingabefeld die Farben ColorBright für die Fläche und ColorBorder für den Rahmen.

Checkbox

Checked, NormalUnchecked, NormalChecked, ActiveUnchecked, Active
Checked, NormalUnchecked, NormalChecked, AktivChecked, Aktiv
SchriftFontClickableFontClickableFontClickable HighlightFontClickable Highlight
Checkbox  

Abstände Checkbox

  • Breite (a): variabel
  • Höhe (B): 5 rem
  • Icon-Höhe und -Breite (C): 2,4 rem
  • Geschützter Bereich oben und unten (D): 1,25 rem
  • Label Abstand unten (E): 2 rem
  • Abstand zwischen Icon und Label (f): 0,5 rem

Das Label der Checkbox darf nicht umbrechen.

Die Schrift basiert im Normalzustand auf FontClickable und im Zustand Aktiv auf FontClickableHighlight. Die Zeilenhöhe ist nicht definiert, da Text nur einzeilig möglich ist.

Die Checkbox verwendet Icons als Ressource.

Listenelemente

Listenelement  

Abstände Listenelement

Listenelemente werden untereinander kombiniert zu einer Liste, z. B. zur Darstellung von Suchergebnissen. Die ausgelöste Aktion wird von der Anwendung festgelegt.

Das Icon auf der rechten Seite ist optional.

  • Breite (a): variabel
  • Höhe (B): 5 rem
  • Geschützter Bereich oben (C): 1,9 rem
  • Geschützter Bereich unten (D): 2,05 rem
  • Abstand Icon oben und unten (E): 1,3 rem
  • Abstand Icon links (f): 2 rem
  • Icon-Höhe und -Breite (G): 2,4 rem
  • Höhe Trennlinie (H): 0,05 rem


Die Texteingabe ist nur einzeilig möglich, die Schrift hat daher keine Zeilenhöhe. Im Normalzustand basiert die Schrift auf FontClickable und im Zustand Aktiv auf FontClickableHighlight.


Farben

  • Fläche: ColorBright
  • Trennlinie: ColorRule

Radio-Button

Checked, Normal Unchecked, NormalChecked, AktivUnchecked, Aktiv
Checked, NormalUnchecked, NormalChecked, AktivUnchecked, Aktiv
SchriftFontClickableFontClickableFontClickable HighlightFontClickable Highlight
Radio Button  

Abstände Radio Button

  • Breite (a): variabel
  • Höhe (B): 5 rem
  • Icon-Höhe und -Breite (C): 2,4 rem
  • Geschützter Bereich oben und unten (D): 1,25 rem
  • Label Abstand unten (E): 2 rem
  • Abstand zwischen Icon und Label (f): 0,5 rem

Das Label darf nicht umbrechen.

Die Schrift basiert im Normalzustand auf FontClickable und im Zustand Aktiv auf FontClickableHighlight. Die Zeilenhöhe ist nicht definiert, da Text nur einzeilig möglich ist.

Der Radio-Button verwendet Icons als Ressource.

Range-Input

Range-Input  

Range-Input Abstände

  • Breite (a): variabel
  • Höhe (B): 4 rem
  • Abstand Track oben und unten (C): 1,8 rem
  • Thumb-Höhe und -Breite (D): 1,6 rem
  • Track-Höhe (E): 0,4 rem
  • Abstand Thumb oben und unten (F): 1,2 rem

Die vertikale Ausrichtung des Thumbs ist zentriert zum Track. Horizontal kann der Thumb die Ausdehnung des Elements nicht überschreiten. Z. B. der niedrigste Wert ist dann erreicht, wenn die linke Kante des Thumb die linke Kante des Tracks erreicht.

Je nach Zustand verändern sich die Farben des Tracks und der Farbverlauf des Thumbs:

  • Normal
    • Thumb: Verlauf oben ColorBlueGreen, unten #07982
    • Track: ColorTrackBase
  • Aktiv
    • Thumb: Verlauf oben #07982, unten ColorBlueGreen
    • Track: ColorRule

Switch

Switch  

Switch Abstände

  • Breite (a): variabel
  • Höhe (B): 6 rem
  • Abstand zwischen Label und Basis (c): 1,5 rem
  • Basisbreite (d): 6,5 rem
  • Basishöhe (E): 2,4 rem
  • Basiseckradius: 0,2 rem
  • Basisrahmen: 0,05 rem
  • Button-Breite (f): 3,2 rem
  • Button-Höhe (G): 2,6 rem
  • Button-Eckradius: 0,2 rem
  • Button-Rahmen: 0,05 rem
  • Abstand vertikal (H): 1,7 rem

Der Button sitzt vertikal zentriert auf der Basis. Das Label sitzt vertikal zentriert zur Basis. Das Label darf nicht umbrechen.

Die Schrift basiert im Normalzustand auf FontClickable und im Zustand Aktiv auf FontClickableHighlight. Die Zeilenhöhe ist nicht definiert, da Text nur einzeilig möglich ist.

 


 

ZustandElementBeschreibungFarbwert
Enabled oder Aktiv, UncheckedBasisFlächeColorSoftBackground
Enabled oder Aktiv, CheckedBasisFlächeColorBlueGreenHighlight
Enabled oder Aktiv, Checked oder UncheckedBasisRahmenColorRule
Enabled, Checked oder UncheckedButtonFläche: Verlauf OberkanteColorBright, Position: 0 %
Enabled, Checked oder UncheckedButtonFläche: Verlauf UnterkanteColorLightBackground, Position: 100 %
Aktiv, Checked oder UncheckedButtonFläche: Verlauf OberkanteColorSoftBackground, Position: 0 %
Aktiv, Checked oder UncheckedButtonFläche: Verlauf UnterkanteColorBright, Position: 100 %
Enabled oder Aktiv, Checked oder UncheckedButtonRahmen#787C7F

PHOENIX CONTACT
GmbH & Co.KG

+49 5235 3-43862

Ulrich Becker

Information Architect

Weitere Informationen