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 Breiten 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
| 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
| default <span style="color: red;">Klasse nicht vorhanden</span>
}}
</onlyinclude>