|
|
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>