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 Klassen|inline}}{{FTUI Klassen|narrow}}
|}

ergibt folgendes Ergebnis:

Klasse	Beschreibung

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, w2x, w3x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Einfache/doppelte/dreifache fixe Breite
 | 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|}}}'''{{!!}}50%
 | tiny = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}60%
 | small = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}80%
 | normal = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}100%
 | large = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}125%
 | big = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}150%
 | bigger = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}200%
 | tall = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}350%
 | grande = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}600%
 | gigantic = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}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

<!--   SONSTIGES -->
 | blank = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Öffnet die angegebene URL in einem neuen Fenster
 | 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

}}
</onlyinclude>