System-Styles

Styles, die in der Installation von EASY UI Designer bereits enthalten sind.

In EASY UI Designer Web UI stehen zwei Style-Familien zur Verfügung: Plain und Material. Jedes Style-Familie beinhaltet mehrere Styles, z. B. Default, Flat und Icon.

Abbildung 1. Der Button in verschiedenen Styles

Style	Standard-Darstellung
Default (kein Style)
Plain.Default
Plain.Flat
Plain.Icon
Material.Default
Material.Flat
Material.Icon
Material.Outlined

Ein Style legt bestimmte Eigenschaften für alle Steuerelemente eines Typs fest. Zum Beispiel legt der Style Plain.Default für alle Steuerelemente vom Typ Button folgende Eigenschaftswerte fest:

Diese Eigenschaft-Wert-Paare sind in der Datei plainstyles.json im Projektordner unter resources/styles festgelegt.

"VisiWin.UI.Button.Plain.Default": {
        "options": {
          "width": "145px",
          "borderRadius": "2px",
          "symbolSize": "18px",
          "backgroundColor": "@PrimaryColor",
          "hoverBackgroundColor": "@PrimaryLightColor",
          "pressedBackgroundColor": "@PrimaryDarkColor",
          "disabledBackgroundColor": "@DisabledCheckedBackgroundColor",
          "foregroundColor": "@White",
          "pressedForegroundColor": "@White"
        }
      },

Die Style-Familien Plain und Material zeichnen sich durch folgende Merkmale aus:

Plain

Diese Style-Familie hat große Ähnlichkeit mit den Steuerelementen in Plain-Style-Projekten im Modern UI. Die Plain-Styles zeichnen sich durch Schlichtheit (Minimalismus) und Zweidimensionalität aus. Diese Style-Familie beinhaltet drei Styles: Plain.Default, Plain.Flat und Plain.Icon. Für das Steuerelement RadialInstrument steht der Style Plain.Tacho zur Verfügung. Die Style-Familie zeichnet sich z. B. durch die Verwendung der Farbe Blau (Grün im Green Theme) bei Schaltflächen aus. Rahmen, Schatten und Großbuchstaben werden nicht standardmäßig verwendet.

Material

Diese Style-Familie ist optisch an Google Material Design angelehnt. Der Material-Style steht in den Styles Material.Default, Material.Flat, Material.Icon und Material.Outlined zur Verfügung. Für das Steuerelement RadialInstrument steht der Style Material.Tacho zur Verfügung. Die Style-Familie ist durch die Verwendung der Farben Grau/Schwarz/Weiß, den Ripple-Effekt bei Schaltflächen, Großbuchstaben für Text und abgerundete Ecken aus. Der Style Material.Outlined zeichnet sich durch die Verwendung des Rahmens, Material.Default durch die Verwendung von Schatten aus.

Einige Elemente sehen im gleichen Style (z. B. Plain.Icon und Material.Icon) in verschiedenen Style-Familien sehr ähnlich aus. Nicht für jedes Steuerelement stehen alle diese Styles zur Verfügung.