Moin Zusammen,
ich bau grad alles von FTUI2 auf 3 um. Ich liebe FTUI3 jetzt schon. :)
In FTUI2 hatte ich mit dem "symbol" Readinabhängig die Farbe wechseln lassen. In dem Fall möchte ich sehen, ob alle Netzwerkgeräte Online sind.
In FTUI3 dachte ich das ich dies mit "ftui-icon" umsetzte (Frage: richtiger Weg?)
Ich finde es richtig schön, das ich das Sysbol hüpfen lassen kann, wenn "DeviceName:absent" aktiv ist. Im Ruhezustand ist es "DeviceName:present"
Darum habe ich es so aufgebaut: map('absent:hop size-4,present:')
Bekommt man es denn hin, dass auch die Farbe wechselt? Also grün/normal und rot/hüpfen? Die Suche hat nichts ergeben.
Danke schon mal für das Feedback. :)
<ftui-grid-tile row="1" col="15" height="3.5" width="1">
<header>Network</header>
<ftui-row>
<ftui-icon name="sitemap" color="red" [class-list]="Internet | map('absent:hop size-4,present:')"></ftui-icon>
</ftui-row>
<ftui-label margin="-20px 0 0 0">Internet</ftui-label>
<ftui-row>
<ftui-icon name="sitemap" color="red" [class-list]="Forti | map('absent:hop size-4,present:')"></ftui-icon>
</ftui-row>
<ftui-label margin="-20px 0 0 0">Fortigate</ftui-label>
<ftui-row>
<ftui-icon name="sitemap" color="red" [class-list]="Fritz.Box | map('absent:hop size-4,present:')"></ftui-icon>
</ftui-row>
<ftui-label margin="-20px 0 0 0">FritzBox</ftui-label>
</ftui-grid-tile>
Ja mit [color]="Device:Reading |map ('zustand1:Farbe1, Zustand2:Farbe2')"
siehe auch hier https://knowthelist.github.io/ftui/www/ftui/examples/icon.html (https://knowthelist.github.io/ftui/www/ftui/examples/icon.html)
Viele Grüße
Jürgen
Für hop nicht [class-list] sondern Bsp.:
[class-name]="Internet | map('absent:hop,present:')"
LG mr_petz
Edit:
wobei [class-list] auch funktionieren sollte...
für size kannst du auch [size] anwenden. Bsp.:
[size]="Internet | map('absent:3,present:5')"
Hinweis:
wenn Bsp.: size="3" gesetzt und dann noch gleichzeitig mit Bsp.: [class-name]="device | map('0:size-5)" gearbeitet wird, zieht class nicht! Also entweder.. oder...
Zitat von: mr_petz am 29 Dezember 2022, 11:22:00
Für hop nicht [class-list] sondern Bsp.:
[class-name]="Internet | map('absent:hop size-4,present:')"
LG mr_petz
Hmmm...ich verstehe jetzt grad nicht den Unterschied zwischen class-list und class-name
Aber wenn ich es richtig verstanden habe, geht es nicht, das Farbwechel und Hop zusammen geht?
Doch geht. Einfach beides definieren Bsp.:
<ftui-icon name="sitemap" [color]="Internet | map('absent:green,present:red')" [class-name]="Internet | map('absent:hop size-4,present:')"></ftui-icon>
LG
Edit:
Du musst nur bei map() aufpassen. map() will immer nur die angegebenen Zustände! step() hingegen aggiert von - bis....
Zitat von: mr_petz am 29 Dezember 2022, 11:30:45
Doch geht. Einfach beides definieren Bsp.:
WOW! Perfekt! Danke!
Das sieht jetzt richtig Top aus! Vielen Dank!