ℹ️ Ultimate-Funktion. Das CSS-Styling steht ab QuickHMI 14.9.1 mit einer Ultimate-Lizenz zur Verfügung.

Damit Ihre CSS-Regeln die richtigen Elemente treffen, stellt QuickHMI im Web-Viewer für jedes Steuerelement Selektoren bereit. Die zugehörigen Eigenschaften finden Sie im Eigenschaften-Manager. Die Property-Namen sind nicht übersetzt: CssId, CssClasses und CssDefaultClasses.

CssId

Die Eigenschaft CssId wird automatisch aus dem voll-qualifizierten Namen des Steuerelements gebildet und ist schreibgeschützt. Im Web-Viewer wird sie zum HTML-Attribut id. Das Format ist Seite-Steuerelement, zum Beispiel Page-QHMIButton. Da eine ID je Element eindeutig ist, sprechen Sie damit genau ein Element an:

#Page-QHMIButton {
  opacity: 0.5;
}

CssClasses

Über CssClasses vergeben Sie eigene Klassen an ein Steuerelement (mehrere durch Leerzeichen getrennt). Das ist der wichtigste Ansatzpunkt, um mehrere Elemente einheitlich zu gestalten: dieselbe Klasse an alle betroffenen Elemente vergeben und eine Regel dafür schreiben.

Automatische qh-Klassen

Zusätzlich vergibt QuickHMI an jedes Steuerelement automatisch Klassen mit dem Präfix qh- (schreibgeschützt in CssDefaultClasses). Damit sprechen Sie ganze Gruppen von Elementen an:

• qh-typ-<typ> nach Steuerelement-Typ, zum Beispiel qh-typ-qhmibutton.
• qh-pag-<seite> nach Seite, zum Beispiel qh-pag-page.
• qh-grp-<gruppe> nach Gruppe, sofern das Element gruppiert ist.
• qh-cat-<kategorie> nach Kategorie, zum Beispiel qh-cat-buttons-and-inputs.
• qh-svg-<name> nach SVG-Namen, bei SVG-basierten Steuerelementen.

Die Werte werden dabei in Kleinbuchstaben umgewandelt und um Sonderzeichen bereinigt.

Klassen kombinieren

Alle diese Klassen (und Ihre eigenen) sitzen auf einem Element. Zum Eingrenzen verwenden Sie daher zusammengesetzte Selektoren ohne Leerzeichen. So treffen Sie nur die Buttons auf der Seite Page:

.qh-pag-page.qh-typ-qhmibutton {
  /* ... */
}

Ein Leerzeichen (.qh-pag-page .qh-typ-qhmibutton) würde nichts treffen, da es ein verschachteltes Element voraussetzen würde.

SVG-Eigenschaften nutzen

Die Steuerelemente werden als SVG gerendert. Verwenden Sie daher SVG-Eigenschaften wie fill, stroke, rx/ry oder opacity statt HTML-Eigenschaften wie background-color oder border. Welche inneren Teile ein bestimmtes Steuerelement besitzt, ermitteln Sie am schnellsten über die Entwicklertools Ihres Browsers (F12, „Element untersuchen“).

Konkrete Anwendungsfälle finden Sie unter Praxisbeispiele.