|
|
| Zeile 88: |
Zeile 88: |
| |style="text-align:center"|'''W'''||ISO-8601 Wochennummer des Jahres | | |style="text-align:center"|'''W'''||ISO-8601 Wochennummer des Jahres |
| |} | | |} |
|
| |
| == CSS-Klassen ==
| |
|
| |
| {|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
| |
| !colspan="2" style="text-align: left;"|sheet/row/cell-Layout
| |
| |-
| |
| !class="mw-collapsible-content"|Klasse!!Beschreibung
| |
| {{FTUI Klasse|sheet}}{{FTUI Klasse|row}}{{FTUI Klasse|cell}}{{FTUI Klasse|cell-1-x}}{{FTUI Klasse|cell-x}}{{FTUI Klasse|left-align}}{{FTUI Klasse|right-align}}{{FTUI Klasse|bottom-align}}{{FTUI Klasse|top-align}}{{FTUI Klasse|center-align}}
| |
| |}
| |
|
| |
| {|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
| |
| !colspan="2" style="text-align: left;"|row/col-Layout
| |
| |-
| |
| !class="mw-collapsible-content"|Klasse!!Beschreibung
| |
| {{FTUI Klasse|col}}{{FTUI Klasse|col-1-x}}{{FTUI Klasse|col-x}}
| |
| |}
| |
|
| |
| <div class="toccolours mw-collapsible mw-collapsed">'''hbox/vbox-Layout'''<div class="mw-collapsible-content">
| |
| {|class="wikitable" style="width: 100%;"
| |
| {{FTUI Klasse|vbox}}{{FTUI Klasse|hbox}}{{FTUI Klasse|card}}{{FTUI Klasse|phone-width}}{{FTUI Klasse|full-height}}{{FTUI Klasse|full-width}}{{FTUI Klasse|grow-0}}{{FTUI Klasse|grow-1}}{{FTUI Klasse|grow-2}}{{FTUI Klasse|grow-x}}{{FTUI Klasse|items-top}}{{FTUI Klasse|items-center}}{{FTUI Klasse|items-bottom}}{{FTUI Klasse|items-space-between}}{{FTUI Klasse|items-space-around}}
| |
| |}</div>
| |
| </div>
| |
|
| |
| <div class="toccolours mw-collapsible mw-collapsed">'''Generelle Klassen für die Positionierung'''<div class="mw-collapsible-content">
| |
| {|class="wikitable" style="width: 100%;"
| |
| {{FTUI Klasse|inline}}{{FTUI Klasse|newline}}{{FTUI Klasse|top-space}}{{FTUI Klasse|top-space-2x}}{{FTUI Klasse|top-space-3x}}{{FTUI Klasse|left-space}}{{FTUI Klasse|left-space-2x}}{{FTUI Klasse|left-space-3x}}{{FTUI Klasse|right-space}}{{FTUI Klasse|right-space-2x}}{{FTUI Klasse|right-space-3x}}{{FTUI Klasse|top-narrow}}{{FTUI Klasse|top-narrow-2x}}{{FTUI Klasse|top-narrow-10}}{{FTUI Klasse|left-narrow}}{{FTUI Klasse|left-narrow-2x}}{{FTUI Klasse|left-narrow-3x}}{{FTUI Klasse|right-narrow}}{{FTUI Klasse|right-narrow-2x}}{{FTUI Klasse|right-narrow-3x}}{{FTUI Klasse|centered}}{{FTUI Klasse|wider}}{{FTUI Klasse|narrow}}{{FTUI Klasse|fullsize}}{{FTUI Klasse|compressed}}{{FTUI Klasse|height-narrow}}{{FTUI Klasse|w1x}}{{FTUI Klasse|w2x}}{{FTUI Klasse|w3x}}{{FTUI Klasse|maxw40}}{{FTUI Klasse|doublebox-v}}{{FTUI Klasse|doublebox-h}}{{FTUI Klasse|triplebox-v}}
| |
| |}</div>
| |
| </div>
| |
|
| |
| <div class="toccolours mw-collapsible mw-collapsed">'''Vordergrundfarben'''<div class="mw-collapsible-content">
| |
| {|class="wikitable" style="width: 100%;"
| |
| {{FTUI Klasse|red}}{{FTUI Klasse|green}}{{FTUI Klasse|blue}}{{FTUI Klasse|lightblue}}{{FTUI Klasse|orange}}{{FTUI Klasse|gray}}{{FTUI Klasse|lightgray}}{{FTUI Klasse|white}}{{FTUI Klasse|black}}{{FTUI Klasse|mint}}{{FTUI Klasse|yellow}}
| |
| |}</div>
| |
| </div>
| |
|
| |
| <div class="toccolours mw-collapsible mw-collapsed">'''Hintergrundfarben'''<div class="mw-collapsible-content">
| |
| {|class="wikitable" style="width: 100%;"
| |
| {{FTUI Klasse|bg-red}}{{FTUI Klasse|bg-green}}{{FTUI Klasse|bg-blue}}{{FTUI Klasse|bg-lightblue}}{{FTUI Klasse|bg-orange}}{{FTUI Klasse|bg-gray}}{{FTUI Klasse|bg-lightgray}}{{FTUI Klasse|bg-white}}{{FTUI Klasse|bg-black}}{{FTUI Klasse|bg-mint}}{{FTUI Klasse|bg-yellow}}
| |
| |}</div>
| |
| </div>
| |
|
| |
| <div class="toccolours mw-collapsible mw-collapsed">'''Rahmen'''<div class="mw-collapsible-content">
| |
| {|class="wikitable" style="width: 100%;"
| |
| {{FTUI Klasse|verticalLine}}{{FTUI Klasse|border-black}}{{FTUI Klasse|border-white}}{{FTUI Klasse|border-orange}}{{FTUI Klasse|border-red}}{{FTUI Klasse|border-green}}{{FTUI Klasse|border-mint}}{{FTUI Klasse|border-lightblue}}{{FTUI Klasse|border-blue}}{{FTUI Klasse|border-gray}}{{FTUI Klasse|border-yellow}}{{FTUI Klasse|border-lightgray}}
| |
| |}</div>
| |
| </div>
| |
|
| |
| <div class="toccolours mw-collapsible mw-collapsed">'''Größen'''<div class="mw-collapsible-content">
| |
| {|class="wikitable" style="width: 100%;"
| |
| {{FTUI Klasse|mini}}{{FTUI Klasse|tiny}}{{FTUI Klasse|small}}{{FTUI Klasse|normal}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|tall}}{{FTUI Klasse|great}}{{FTUI Klasse|grande}}{{FTUI Klasse|gigantic}}
| |
| |}</div>
| |
| </div>
| |
|
| |
| <div class="toccolours mw-collapsible mw-collapsed">'''Schriftstil'''<div class="mw-collapsible-content">
| |
| {|class="wikitable" style="width: 100%;"
| |
| {{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|darker}}{{FTUI Klasse|truncate}}
| |
| |}</div>
| |
| </div>
| |
|
| |
| <div class="toccolours mw-collapsible mw-collapsed">'''Sonstiges'''<div class="mw-collapsible-content">
| |
| {|class="wikitable" style="width: 100%;"
| |
| {{FTUI Klasse|blank}}{{FTUI Klasse|transparent}}{{FTUI Klasse|half-transparent}}{{FTUI Klasse|blurry}}{{FTUI Klasse|shake}}{{FTUI Klasse|fail-shake}}{{FTUI Klasse|marquee}}{{FTUI Klasse|icon round}}{{FTUI Klasse|icon square}}{{FTUI Klasse|readonly}}{{FTUI Klasse|blink}}{{FTUI Klasse|rotate-90}}{{FTUI Klasse|horizontal}}{{FTUI Klasse|circleborder}}{{FTUI Klasse|autohide}}{{FTUI Klasse|notransmit}}{{FTUI Klasse|tab}}{{FTUI Klasse|FS20}}{{FTUI Klasse|value}}{{FTUI Klasse|novalue}}{{FTUI Klasse|timestamp}}{{FTUI Klasse|percent}}{{FTUI Klasse|nocache}}
| |
| |}</div>
| |
| </div>
| |
|
| |
|
| ==Beispiele== | | ==Beispiele== |
| Todo: Die CSS-Klassen müssen noch überprüft werden.
|
Das Widget Clock ist ein Widget für FHEM Tablet UI, welches die aktuelle Zeit in digitaler Form wiedergibt.
Attribute
| Attribut
|
Beschreibung
|
Standard-Wert
|
Beispiel
|
| data-format |
Format, siehe nachfolgende Tabelle |
|
| data-interval |
Aktualisierungsinterval in Milisekunden |
1000 |
|
| data-days |
Array der Bezeichner für Wochentagsnamen. Werden zur Ersetzung für die Formate l und D verwendet. Statt eines Arrays kann das Keyword "english" verwendet werden, um englische Wochentagsnamen zu verwenden. |
["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag"] |
data-days="english"
|
| data-shortday-length |
Länge des abgekürzten Wochentagsbezeichners im Format D |
3
|
| data-months |
Array der Bezeichner für Monatsnamen. Werden zur Ersetzung für die Formate F und M verwendet. Statt eines Arrays kann das Keyword "english" verwendet werden um englische Monatsnamen zu verwenden. |
["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"] |
data-months="english"
|
| data-shortmonth-length |
Länge des abgekürzten Monatsbezeichners im Format M |
3
|
Bezeichner
Das Format wird als String angegeben. Die in der nachfolgenden Tabelle aufgeführten Bezeichner werden durch den aktuellen Wert ersetzt, die übrigen Zeichen bleiben stehen. Default "H:i:s"
| Bezeichner
|
Beschreibung
|
| Y |
Jahreszahl, vierstellig
|
| y |
Jahreszahl, zweistellig
|
| m |
Monatszahl, mit führender Null
|
| n |
Monatszahl, ohne führende Null
|
| d |
Tag des Monats, mit führender Null
|
| j |
Tag des Monats, ohne führende Null
|
| H |
Stunde des Tages, mit führender Null
|
| G |
Stunde im 24-Stunden-Format, ohne führende Null
|
| i |
Minute der Stunde, mit führender Null
|
| s |
Sekunde der Minute, mit führender Null
|
| u |
Millisekunden mit führender Null
|
| O |
Zeitunterschied zur Greenwich time (GMT) in Stunden
|
| U |
Sekunden seit Beginn der UNIX-Epoche (January 1 1970 00:00:00 GMT)
|
| w |
Wochentagszahl (Sonntag = 0, Samstag=6)
|
| N |
Wochentagszahl nach ISO-8601 (Montag = 1, Sonntag = 7)
|
| l |
Wochentag
|
| D |
Wochentag, gekürzt
|
| S |
Anhang der englischen Aufzählung für einen Monatstag, zwei Zeichen
|
| F |
Monat als ganzes Wort, wie Januar oder März
|
| M |
Monatsname gekürzt
|
| g |
Stunde im 12-Stunden-Format, ohne führende Nullen
|
| h |
Stunde im 12-Stunden-Format, mit führenden Nullen
|
| a |
am/pm
|
| A |
AM/PM
|
| W |
ISO-8601 Wochennummer des Jahres
|
Beispiele
<div data-type="clock"></div>
<div data-type="clock" data-format="Y-m-d H:i:s"></div>
<div data-type="clock" data-format="l, j. F Y"></div>