Vorlage:FTUI Klasse

Vorlage für die dynamische Anzeige jeweils einer CSS-Klasse, die von FHEM Tablet UI zur Verfügung gestellt wird.

Jeder Aufruf dieser Vorlage ist jeweils eine Tabellenzeile, es muss daher vor der ersten Einbindung dieser Vorlage eine Tabelle geöffnet ( {| ) und nach der letzten Einbindung die Tabelle geschlossen werden ( |} ).

Soll die Vorlage öfter eingebunden werden, muss das in einer Zeile erfolgen, ansonsten gibt es unschöne Leerzeilen.

Beispiel

Folgender Code

{|class="wikitable"
!Klasse!!Beschreibung
{{FTUI Klasse|inline}}{{FTUI Klasse|narrow}}
|}

ergibt folgendes Ergebnis:

Klasse	Beschreibung
inline	Positioniert Elemente in einer Reihe, kein Zeilenumbruch
narrow	Weniger Abstand zum Element darüber

Code

<onlyinclude>
{{#switch: {{{1|}}}

<!-- POSITIONIERUNG -->
<!--   GENERELL     -->
 | inline = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Positioniert Elemente in einer Reihe, kein Zeilenumbruch
 | newline = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Positioniert Elemente jeweils in einer neuen Zeile, Zeilenumbruch
 | top-space = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}15px zusätzlicher Platz oben
 | top-space-2x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}30px zusätzlicher Platz oben
 | top-space-3x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}45px zusätzlicher Platz oben
 | left-space = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}15px zusätzlicher Platz links
 | left-space-2x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}30px zusätzlicher Platz links
 | left-space-3x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}45px zusätzlicher Platz links
 | right-space = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}15px zusätzlicher Platz rechts
 | right-space-2x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}30px zusätzlicher Platz rechts
 | right-space-3x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}45px zusätzlicher Platz rechts
 | top-narrow = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}} -15px näher am oberen Rand
 | top-narrow-2x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}} -30px näher am oberen Rand
 | top-narrow-10 = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}} -10px näher am oberen Rand
 | left-narrow = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}15px weiter links
 | left-narrow-2x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}30px weiter links
 | left-narrow-3x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}45px weiter links
 | right-narrow = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}15px weiter rechts
 | right-narrow-2x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}30px weiter rechts
 | right-narrow-3x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}45px weiter rechts
 | centered = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Horizontal zentriert (muss im Eltern-<nowiki><div></nowiki> gesetzt werden)
 | wider = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}15px Abstand rund um das Element
 | narrow = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Weniger Abstand zum Element darüber
 | fullsize = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}100% Breite und Höhe
 | compressed = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Switches und Symbole bekommen Breite und Höhe von 1em statt 2em, damit weniger Platz rundum da Icon benötigt wird
 | w1x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Einfache fixe Breite
 | w2x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Doppelte fixe Breite
 | w3x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Dreifache fixe Breite
 | maxw40 = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Maximale Breite 40px
 | doublebox-v = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Container, in dem zwei kleine Elemente (z.B. Switches) übereinander platziert werden können
 | doublebox-h = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Container, in dem zwei kleine Elemente (z.B. Switches) nebeneinander platziert werden können
 | triplebox-v = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Container, in dem drei kleine Elemente (z.B. Switches) übereinander platziert werden können

<!--   SHEET-ROW-COL -->

 | sheet = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Startet eine neue Tabelle
 | row = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Neue Reihe in der aktuellen Tabelle
 | cell = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Neue Zelle (bzw. Spalte) in der aktuellen Reihe
 | cell-1-x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Neue Zelle in der aktuellen Reihe mit einer festen Breite von X (z.B.: cell-1-3 (33%), cell-1-4 (25%))
 | cell-x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Neue Zelle in der aktuellen Reihe mit einer festen Breite von X in Prozent (z.B.: cell-20 (20%), cell-40 (40%))
 | left-align = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Inhalt der Zelle linksbündig
 | right-align = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Inhalt der Zelle rechtsbündig
 | bottom-align = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Inhalt der Zelle am unteren Rand
 | top-align = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Inhalt der Zelle am oberen Rand
 | center-align = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Inhalt der Zelle zentriert

<!--   ROW-COL -->
 | col = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Neue Spalte in der aktuellen Zeile. Breite automatisch.
 | col-1-x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Neue Spalte in der aktuellen Zeile. Feste Breite von X (z.B.: col-1-3 (33%), col-1-4 (25%))
 | col-x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Neue Spalte in der aktuellen Zeile. Feste Breite von X Prozent (z.B.: col-20 (20%), col-40 (40%))

<!--   HBOX/VBOX -->
 | vbox = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vertikale Box - Inhalte übereinander
 | hbox = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Horizontale Box - Inhalte nebeneinander
 | card = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Eine "Haupt"-Box
 | phone-width = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Breite darf nicht unter die Display-Breite des Gerätes sinken
 | full-height = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Inhalt geht über die gesamte Höhe des Browser-Fensters (100% viewport height)
 | full-width = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Inhalt geht über die gesamte Breite des Browser-Fensters (100% width)
 | grow-0 = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Box darf nicht wachsen
 | grow-1 = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Standardgröße der Box
 | grow-2 = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Box darf um das doppelte wachsen
 | grow-x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Box darf um das X-fache wachsen
 | items-top = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Inhalte der Box werden oben ausgerichtet
 | items-center = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Inhalte der Box werden zentriert
 | items-bottom = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Inhalte der Box werden unten ausgerichtet
 | items-space-between = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Übriger Platz zwischen den Elementen in der Box
 | items-space-around = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Übriger Platz um die Elemente in der Box

<!--   VORDERGRUNDFARBEN -->

 | red = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe rot
 | green = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe grün
 | blue = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe blau
 | lightblue = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe hellblau
 | orange = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe orange
 | gray = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe grau
 | lightgray = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe hellgrau
 | white = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe weiß
 | black = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe schwarz
 | mint = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe minzgrün
 | yellow = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe gelb

<!--   HINTERGRUNDFARBEN -->
 | bg-red = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe rot
 | bg-green = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe grün
 | bg-blue = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe blau
 | bg-lightblue = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe hellblau
 | bg-orange = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe orange
 | bg-gray = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe grau
 | bg-lightgray = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe hellgrau
 | bg-white = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe weiß
 | bg-black = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe schwarz
 | bg-mint = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe minzgrün
 | bg-yellow = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe gelb

<!--   GROESSEN -->

 | mini = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 50%
 | tiny = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 60%
 | small = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 80%
 | normal = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 100%
 | large = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 125%
 | big = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 150%
 | bigger = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 200%
 | tall = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 350%
 | grande = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 600%
 | gigantic = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 144px

<!--   SCHRIFT -->
 | thin = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}dünne Schrift
 | bold = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}fette Schrift
 | darker = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Schriftfarbe grau
 | truncate = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Text wird - wenn nötig - abgeschnitten und mit "..." ergänzt

<!--   RAHMEN -->
 | verticalLine = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Grauer Linie am rechten Rand des Elements
 | border-black = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Schwarzer Rahmen um das Element
 | border-white = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Weißer Rahmen um das Element
 | border-orange = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Oranger Rahmen um das Element
 | border-red = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Roter Rahmen um das Element
 | border-green = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Grüner Rahmen um das Element
 | border-mint = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Minzgrüner Rahmen um das Element
 | border-lightblue = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hellblauer Rahmen um das Element
 | border-blue = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Blauer Rahmen um das Element
 | border-gray = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Grauer Rahmen um das Element
 | border-yellow = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Gelber Rahmen um das Element
 | border-lightgray = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hellgrauer Rahmen um das Element

<!--   SONSTIGES -->
 | blank = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Öffnet die angegebene URL in einem neuen Fenster
 | transparent = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Element erscheint komplett durchscheinend (somit nicht sichtbar; opacity: 0)
 | half-transparent = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Element ist halb durchscheinend (opacity: 0.5)
 | blurry = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Element wird in einen stark verschwommen, grauen Schatten umgewandelt
 | shake = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Element zittert stark für einen unendlichen Zeitraum. Kann z.B. für eine Alarmglocke verwendet werden.
 | fail-shake = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Element wackelt kurz hin und her und bleibt dann stehen
 | marquee = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Element wandert wiederholt von rechts nach links
 | round = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Erzeugt einen Hintergrund mit abgerundeten Kanten
 | square = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Erzeugt einen Hintergrund mit eckigen Kanten
 | readonly = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Manuelle Änderung des Device-Zustandes nicht möglich
 | blink = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Blinkende Animation für Label- oder Switch-Widget
 | rotate-90 = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Element (z.B. Bild) um 90° rotieren
 | horizontal = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Element horizontal ausrichten
 | negated = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Spiegelt die Wirkungsweise (tauscht oben/unten oder links/rechts)
 | circleborder = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Runder Rahmen um Labels
 | autohide = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Versteckt das Element, wenn das angegebene Reading ungültig ist
 | notransmit = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Verhindert den Versand von Befehlen an FHEM
 | invert = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vertauscht Vorder- und Hintergrundfarbe
 | data-lock = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Wenn das angegebene FHEM-Reading den Wert ''1'', ''on'' oder true'' hat, wird das Widget gesperrt
 | tab = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Durch einfaches Antippen zum gewünschten Wert springen
 | FS20 = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Konvertiert den Wertebereich 0...100 in das von FS20-Dimmern erwartete Format
 | value = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Zeigt ein Label am Element, das den aktuellen Wert enthält
 | {{!}}-
{{!}}'''{{{1|}}}'''{{!!}}'''Fehler:''' Klasse nicht vorhanden
}}
</onlyinclude>