Konfiguration: UI-Thema ui-theme

Jeder Seite kann ein Thema zugewiesen werden, das zum Rendern der Seite verwendet wird. Das Thema ist eine Sammlung von Farben, die das Aussehen und die Haptik der Widgets steuern.

Farben

Prop	Description
Oberfläche	Steuert die Farbe der Kopfzeile und der Navigationsseitenmenüs
Primär	Jedes interaktive Element wird mit dieser Farbe gestaltet, einschließlich Schaltflächen, Schieberegler und Fokuszustand von Eingabefeldern.
Seiten - Hintergrund	Die Hintergrundfarbe der gesamten Seite
Gruppen - Hintergrund	Die Hintergrundfarbe aller auf der Seite gerenderten Gruppen
Gruppen - Umriss	Die Farbe des Rahmens aller auf der Seite gerenderten Gruppen

Größen

Prop	Description
Zeilenhöhe	Wie hoch eine einzelne Zeile (Höheneinheit) im Dashboard gerendert werden soll. Optionen hier sind Standard (48px), Komfortabel (36px) und Kompakt (32px).
Seitenabstand	Der Abstand, der alle Gruppen auf einer Seite umgibt. Anwendbar für Raster- & Feste Layouts und Notizbuch-Layouts, bei denen die Bildschirmbreite schmaler als 1024px ist. Sie können den Abstand für jede Seite der Seite separat mit CSS Shorthand notation definieren.
Gruppenzwischenraum	Der Abstand zwischen jeder Gruppe in einem Layout. Standard: 12px
Gruppenrandradius	Der Randradius der Umrandung jeder Gruppe auf einer Seite. Standard: 4px
Widget-Zwischenraum	Der Abstand zwischen jedem Widget innerhalb einer Gruppe. Standard: 12px

Beispiele

Modifizierte Farben & Abstände

Beispielkonfiguration von ui-theme in Node-RED:

Ergebnis-Dashboard mit angewendetem Thema:

Die hier gewählten Farben wurden ausgewählt, um es einfacher zu machen, zwischen den verschiedenen Gruppen zu unterscheiden, anstatt ästhetisch ansprechend zu sein.

Zeilenhöhe

Standard (Links), Komfortabel (Mitte), Kompakt (Rechts) Zeilenhöhenvergleiche für ein UI-Tabellenelement

Die Zeilenhöhe steuert, wie hoch eine einzelne Zeile (Höheneinheit) im Dashboard gerendert werden soll. Optionen hier sind Standard (48px), Komfortabel (36px) und Kompakt (32px).