Allgemeine Einstellungen eines Widgets
Ein Widget ist ein Baustein einer Visualisierung: es zeigt einen Wert an, stellt ein Bild oder ein Diagramm dar oder nimmt eine Eingabe entgegen. Aus Widgets wird eine Bedienseite zusammengesetzt.
Welche Widgets zur Verfügung stehen, hängt davon ab, welche Widgetsätze installiert sind. Eine vollständige Übersicht steht unter Widgetsätze. Diese Seite beschreibt die Einstellungen, die jedes Widget hat, unabhängig davon, aus welchem Satz es stammt.
?> Die Bilder zeigen den Editor von vis. In vis-2 heißen die Felder weitgehend gleich, die Oberfläche sieht aber anders aus. Für neue Projekte ist vis-2 die richtige Wahl, siehe vis-2.
Allgemein
| Attribut | Beschreibung |
|---|---|
| Name | Hier kann ein eindeutiger Name für dieses Widget eingegeben werden |
| Kommentar | Hier kann eine kurze Beschreibung dazu eingegeben werden |
| CSS Klasse | Eine eigene CSS-Klasse, um das Widget über das Stylesheet der Ansicht zu gestalten. |
| Filterwort | Ein Schlagwort, über das sich Widgets gruppenweise ein- und ausblenden lassen. |
| Zeige in Views | Hier kann ausgewählt werden, ob dieses Widget nur im aktuellen View oder in mehreren erscheinen soll. |
| Inaktiv (locked) | Sperrt das Widget im Editor gegen versehentliches Verschieben. |
Sichtbarkeit
Die Sichtbarkeit eines Widgets kann von dem Zustand eines Datenpunktes abhängig gemacht werden.
| Attribut | Beschreibung |
|---|---|
Object ID | Hier wird die ID des Datenpunkts eingegeben, der die Sichtbarkeit des ausgewählten widgets steuern soll. Der Datenpunkt kann über den Button gesucht werden. |
| Bedingung | Das Widget wird sichtbar wenn die hier eingegebene Bedingung für den o.a. Datenpunkt... |
| Wert für die Bedingung | ...dem hier eingebenen Wert entspricht. |
Die eigenen Einstellungen des Widgets
Dieser Abschnitt sieht bei jedem Widget anders aus und ist bei den einzelnen Widgets beschrieben. Immer dabei ist das Feld Object ID: darüber wird dem Widget der Datenpunkt zugeordnet, den es anzeigen oder steuern soll.
Die folgenden Abschnitte betreffen wieder alle Widgets. Sie bestimmen über CSS, wie das Widget aussieht.
CSS allgemein
| Attribut | Beschreibung |
|---|---|
left | Abstand vom linken Rand des Views |
top | Abstand vom oberen Rand des Views |
width | Breite des Widgets |
height | Höhe des Widgets |
z-index | Angebe der Ebene, in der das Widget liegt (0= auf dem Hintergrund, positive Werte= je höher der Wert, desto weiter vorne) |
overflow-x | The overflow property specifies what should happen if content overflows an element's box. This property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area. |
overflow-y | |
opacity | Durchsichtigkeit (0=undurchsichtig ->Bild unsichtbar .. 1=durchsichtig ->Bild sichtbar) |
CSS Schrift und Text
| Attribut|Beschreibung|
|-----|----|
| color|Schriftfarbe (über Auswahldialog oder per Farbcode)
| text-align|Bündigkeit des Textes (links, rechts, zentriert)
| text-shadow|Farbe des Textschattens
| font-family|Font
| font-style|Zeichensatzart (normal, kursiv, oblique, initial, inherit)
| font-variant|Zeichensatzvariante (normal, Kapitälchen, ...)
| font-weight|Zeichensatzstärke
| font-size|Schriftgröße
| line-height|Zeilenabstand
| letter-spacing|Zeichenabstand
| word-spacing|Wortabstand
CSS Hintergrund
| Attribut | Beschreibung |
|---|---|
background | Hier können mehrere der folgenden Eigenschaften gemeinsam angegeben werden |
-color | Farbe des Hintergrunds |
-image | Hintergrundbild |
-repeat | Legt fest, ob ein Hintergrund über die gesamte Breite oder/und Höhe eines Elements wiederholt wird. |
-attachement | Legt fest, ob ein Hintergrundbild fest ist, oder beim Scrollen mitverschoben wird |
-position | Ausrichtung des Hintergrundbildes (https://www.w3schools.com/cssref/pr_background-position.asp) |
-size | Größe des Hintergrundbildes |
-clip | Regelt die Überschneidung mit dem Rand |
-origin | Koordinatensystemursprung für Bildkoordinaten |
CSS Rahmen
| Attribut | Beschreibung |
|---|---|
-width | Dicke der Umrandung |
-style | Linienart der Umrandung |
-color | Farbe der Umrandung |
-radius | Eckenradius der Umrandung; kann höchstens die Hälfte der kürzeren Strecke des Widgets sein |
| Attribut | Beschreibung |
|---|---|
-width | Dicke der Umrandung |
-style | Linienart der Umrandung |
-color | Farbe der Umrandung |
-radius | Eckenradius der Umrandung; kann höchstens die Hälfte der kürzeren Strecke des Widgets sein |
CSS Schatten und Abstand
| Attribut | Beschreibung |
|---|---|
padding | Versatz vom Rand der Widget-Box |
padding-left | Versatz auf der linken Seite |
padding-top | Versatz auf der oberen Seite |
padding-right | Versatz auf der rechten Seite |
padding-bottom | Versatz auf der unteren Seite |
box-shadow | Farbe des Schattens der Widget-Box |
margin-top | Oberer Rand um das Widget (auto, %, px, pt, cm) |
margin-right | Rechter Rand um das Widget |
margin-bottom | Unterer Rand um das Widget |
margin-left | Linker Rand um das Widget |
| Attribut | Beschreibung |
|---|---|
padding | Versatz vom Rand der Widget-Box |
padding-left | Versatz auf der linken Seite |
padding-top | Versatz auf der oberen Seite |
padding-right | Versatz auf der rechten Seite |
padding-bottom | Versatz auf der unteren Seite |
box-shadow | Farbe des Schattens der Widget-Box |
margin-top | Oberer Rand um das Widget (auto, %, px, pt, cm) |
margin-right | Rechter Rand um das Widget |
margin-bottom | Unterer Rand um das Widget |
margin-left | Linker Rand um das Widget |