Hallo zusammen.
Bei meiner bestehenden (alten) FTUI-Oberfläche funktioniert folgendes Konstrukt:
data-states='["Wertstoff","Rest","Papier","Glas","Garten","Sperrgut","???"]'
data-icons= '["fa-trash-o","fa-trash-o","fa-trash-o","fa-glass","fa-tree", fa-box-open", ""]'
data-colors='["rcol:Wertstoff", "rcol:Rest", "rcol:Papier", "rcol:Glas", "rcol:Garten", "rcol:Sperrgut", "transparent"]'Die Icon-Farben sind hierbei in dem Device rcol mit den Readings Wertstoff, Rest, Papier, ... als Hex-Code (#E5A941) hinterlegt.
Jetzt möchte ich die selbe Funktionaliät mit FTUI-3 realisieren, aber das klappt leider nicht.
<ftui-icon>
...
[color]="rcol:rubbishType |
map('`Wertstoff`: rcol:Wertstoff, `Rest`: rcol:Rest, `Papier`: rcol:Papier, `Glas`: rcol:Glas, `Garten`: rcol:Garten, `Sperrgut`: rcol:Sperrgut')"
</ftui-icon>
Ich habe dann mal eine eigene *.css mit Farbefinition erstellt, die ich dann über [class-name] eingebunden habe. Klappt aber leider auch nicht.
.rcGarten {color: #E5A941;}
.rcGlas {color: #3C942C;}
.rcPapier {color: #3B5DD2;}
.rcRest {color: #8B8B8B;}
.rcSperrgut {color: #91775F;}
.rcWertstoff {color: #DDDD00;}[class-name]="rcol:rubbishType{{idx}} |
map('`Wertstoff`: rcWertstoff, `Rest`: rcRest, `Papier`: rcPapier, `Glas`: rcGlas, `Garten`: rcGarten, `Sperrgut`: rcSperrgut')"
Kann mir jemand auf die Sprünge helfen?
Danke euch vorab!
Zitat von: DocCyber am 29 November 2023, 11:20:38Ich habe dann mal eine eigene *.css mit Farbefinition erstellt, die ich dann über [class-name] eingebunden habe. Klappt aber leider auch nicht.
.rcGarten {color: #E5A941;}
.rcGlas {color: #3C942C;}
.rcPapier {color: #3B5DD2;}
.rcRest {color: #8B8B8B;}
.rcSperrgut {color: #91775F;}
.rcWertstoff {color: #DDDD00;}[class-name]="rcol:rubbishType{{idx}} |
map('`Wertstoff`: rcWertstoff, `Rest`: rcRest, `Papier`: rcPapier, `Glas`: rcGlas, `Garten`: rcGarten, `Sperrgut`: rcSperrgut')"
Das HTML Attribut wäre class.
[class]="rcol:rubbishType{{idx}} |
map('`Wertstoff`: rcWertstoff, `Rest`: rcRest, `Papier`: rcPapier, `Glas`: rcGlas, `Garten`: rcGarten, `Sperrgut`: rcSperrgut')"Damit müsste die class gesetzt werden und ersetzt color entsprechend.
Ob FTUI3 im Standard mehrstufig Werte ermitteln kann, weiss ich nicht. Vlt hat @mr_petz eine smarte Idee.
Zitat von: yersinia am 29 November 2023, 14:16:14Damit müsste die class gesetzt werden und ersetzt color entsprechend.
Hab ich jetzt probiert; klappt auch nicht. :'(
Ich habe aber
irgendwo in den Tiefen des FTUI-Megathreads in den
examples/icon.html ein Beispiel von setsate gesehen, wo er mit [class-name] arbeitet. Funktioniert nur hier nicht.
ZitatOb FTUI3 im Standard mehrstufig Werte ermitteln kann, weiss ich nicht. Vlt hat @mr_petz eine smarte Idee.
Würde mich freuen...
Mit dem richtigen Namen für das Device ( ::) ) geht es unter Verwendung von [class-name] und ohne [class] so:
<ftui-icon
[hidden]="rubbish:rubbishType | map('`none`:true, `.*`:false')"
[name]="rubbish:rubbishType |
map('`Wertstoff`: trash, `Rest`: trash, `Papier`: trash, `Glas`: glass, `Garten`:tree, `Sperrgut`:dropbox')"
[class-name]="rubbish:rubbishType |
map('`Wertstoff`: rcWertstoff, `Rest`: rcRest, `Papier`: rcPapier, `Glas`: rcGlas, `Garten`: rcGarten, `Sperrgut`: rcSperrgut') |
append(' size--2')">
</ftui-icon>
Mit dieser Lösung kann ich leben, auch wenn das keine direkt Zuweisung des Farb-Hex-Codes darstellt, sondern über den Umweg einer eigenen CSS.