Button

Der Elementarbaustein Button ist nichts anderes als eine interaktive Fläche. Über dieser können dann nicht interaktive Bausteine (zurzeit Text, Wert, Bild oder Symbol) platziert werden. Der Button übernimmt für diese dann die Interaktion mit dem Anwender und bietet dazu entsprechende Ereignisse (onDown, onUp, onClick) an.

CSS Klassen

• Button-Darstellung: Im HTML-Code wird der Button durch ein einzelnes <div>-Element repräsentiert, das die CSS-Klasse dashboardButtonControl verwendet.

• Enabled-Zustand:

  • Wenn der Parameter Status den Wert true hat, wird die CSS-Klasse controlEnabled hinzugefügt. Der Button ist dann enabled.
  • Wenn Status den Wert false hat, wird die CSS-Klasse controlDisabled hinzugefügt. Der Button ist dann disabled.
  • Wenn Status weder true noch false ist (zum Beispiel, weil kein Wert zugewiesen wurde), werden keine zusätzlichen CSS-Klassen hinzugefügt. Der Button ist weder enabled noch disabled.

• Active-Zustand:

  • Wenn der Parameter Active den Wert true hat, wird die CSS-Klasse controlActiveTrue hinzugefügt. Der Button ist dann active.
  • Wenn Active den Wert false hat, wird die CSS-Klasse controlActiveFalse hinzugefügt. Der Button ist dann inactive.

Je nach den Werten der Parameter Status und Active werden unterschiedliche CSS-Klassen zum Button hinzugefügt. Diese Klassen bestimmen das Aussehen und Verhalten des Buttons auf der Webseite.

CSS-Variablen

• --dashboard-button-control-background: Dies legt die Hintergrundfarbe für alle Schaltflächen innerhalb eines Dashboards fest
• --dashboard-button-control-active: Voreinstellung #00ff00, Hintergrundfarbe wenn der Baustein active ist.
• --dashboard-button-control-inactive: Voreinstellung #ff4040, Hintergrundfarbe, wenn der Baustein inactive ist.
• --dashboard-button-control-enabled-opacity: Voreinstellung 1, die CSS opacity für einen enabled Button. Man beachte, dass dieser Wert auch die Grundeinstellung der HTML Elementes ist, so dass bei Verwendung der Voreinstellungen enabled optisch keinen Unterschied macht.
• --dashboard-button-control-disabled-opacity: Voreinstellung 0.5, analog für disabled.

Zusätzlich wird der Hintergrund variiert, wenn sich die Maus über dem Baustein befindet (CSS :hover) und der Button nicht disabled ist - in diesem Falle wird auch entsprechendes Symbol für den Mauszeiger aktiviert (CSS cursor:pointer):

• --dashboard-button-control-hover-active: Voreinstellung #00cc00, für den Fall, dass der Button active ist.
• --dashboard-button-control-hover: Voreinstellung #ff8080, in allen anderen Fällen, also wenn der Button inactive ist oder der Parameter Active weder true noch false liefert.

Besondere Hinweise

Alle CSS Variablen, die sich auf den Hintergrund beziehen, setzen immer die CSS Eigenschaft background - und nicht etwa background-color. Die Voreinstellungen sind zwar nur feste Farbwerte ohne Transparenz, aber der Phantasie sind hier keine Grenzen gesetzt - die CSS Variablen können durchaus auch Farbgradienten beschreiben.