FHEM Forum

Hallo zusammen

Ich möchte ein Icon in Abhängkeit eines Flags verschwinden lassen.
Mit hidden geht das, aber diese Lösung reserviert den Platz für das Icon, und das möchte ich nicht.
Besser ist hier <style "display:none;"></style>.
Der Vorgang ist im Grunde im Wiki (FTUI3 HTML Controls (https://wiki.fhem.de/wiki/FTUI3_HTML_Controls)) erklärt, aber ich bekomme es trotzdem nicht hin.

Mein Flag (der Schalter) heißt windowProblem und kann die Werte 0 und 1 annehmen. Bei 1 soll das Icon erscheinen, bei 0 soll es verschwinden.
Ich habe u.a. folgendes probiert:
<ftui-column width="20%">
  <div windowProblem [style]="windowProblem | map('0:`display: none;`, 1:``)">
    <ftui-icon class="size--3" name="window-open"></ftui-icon>
  </div>
</ftui-column>


Weiß jemand, wo mein Fehler liegt bzw. wie es geht?

Ich denke du solltest ftui-binding auch einbinden: ;)
<ftui-column width="20%">
  <div ftui-binding [style]="windowProblem | map('0:`display: none;`, 1:`')">
    <ftui-icon class="size--3" name="window-open"></ftui-icon>
  </div>
</ftui-column>
Es kann sein, dass display hier nicht richtig funktioniert, da es vorher nicht definiert worden ist. Im Sichtbar-Fall sollte display auch definiert werden.
<ftui-column width="20%">
  <div ftui-binding [style]="windowProblem | map('0:`display: none;`, 1:`display: inline-block;`')">
    <ftui-icon class="size--3" name="window-open"></ftui-icon>
  </div>
</ftui-column>
Möglicherweise ist visibility (https://developer.mozilla.org/en-US/docs/Web/CSS/visibility?retiredLocale=de) besser:
<ftui-column width="20%">
  <div ftui-binding [style]="windowProblem | map('0:`visbility: hidden;`, 1:`visbility: visible;`')">
    <ftui-icon class="size--3" name="window-open"></ftui-icon>
  </div>
Zudem fehlt(e) das abschließende Hochkomma (') im map.

Zitat von: yersinia am 28 November 2023, 17:08:32Ich denke du solltest ftui-binding auch einbinden

Das habe ich mehrfach versucht, aber damit gab es stets einen Fehler im Browser (rot gestrichelte Linie um das entsprechende Element).

Mittlerweile habe ich festgestellt, dass offenbar nur bei
<ftui-grid-tile> [hidden]=... </ftui-grid-tile> die Kachel zwar nicht angezeigt, aber der Platz reserviert bleibt.

Dieses Verhalten hatte ich deshalb auch für <ftui-icon> erwartet, aber schließlich funkioniert es doch wie gewünscht! (ich war also zu voreilig.)
Dann tatsächlich wird ein ein Verhalten wie mit <style="display: none;"> realisiert:
<ftui-icon class="size--2" name="battery-1" color="danger" rotate="-90"
    [hidden]="batteryProblem | map('`0`:true, `1`:false')">
</ftui-icon>
Eigentlich auch kein Wunder, denn ein Blick in die ftui.css zeigt, dass hidden genau das macht: display: none  ::)

Ich denke, dass das Thema damit als erledigt angesehen kann.


Danke für deinen Input.

Zitat von: DocCyber am 28 November 2023, 17:56:56

Zitat von: yersinia am 28 November 2023, 17:08:32Ich denke du solltest ftui-binding auch einbinden

Das habe ich mehrfach versucht, aber damit gab es stets einen Fehler im Browser (rot gestrichelte Linie um das entsprechende Element).

Macht FTUI3 mWn nur, wenn was mit der Funktionsübergabe nicht stimmt.

Ich würde hier auch ein Reading erwarte, wenn es nicht state sein soll:
<ftui-column width="20%">
  <div ftui-binding [style]="windowProblem:READING | map('0:`visbility: hidden;`, 1:`visbility: visible;`')">
    <ftui-icon class="size--3" name="window-open"></ftui-icon>
  </div>Meine letzten Versuche mit ftui-binding auf nicht-FTUI3-Elementen liefen eigtl wie erwartet, ist aber auch schon mind 1 Jahr her.

Zitat von: yersinia am 29 November 2023, 13:57:57Ich würde hier auch ein Reading erwarte, wenn es nicht state sein soll

Es ist aber state.  ;)

Zitat von: DocCyber am 29 November 2023, 14:15:24Es ist aber state.  ;)

hast du es mal explizit angegeben?

Ich hab nochmal in altem HTML code nachgeschaut und eine explizite binding Definition gefunden:
<ftui-column width="20%">
  <div ftui-binding="style" [style]="windowProblem:state | map('0:`visbility: hidden;`, 1:`visbility: visible;`')">
    <ftui-icon class="size--3" name="window-open"></ftui-icon>
  </div>In einer Version habe ich auch class (anstelle von class-name) verwendet.

Zitat von: yersinia am 29 November 2023, 13:57:57

Code Auswählen Erweitern

<ftui-column width="20%">
  <div ftui-binding [style]="windowProblem:READING | map('0:`visbility: hidden;`, 1:`visbility: visible;`')">
    <ftui-icon class="size--3" name="window-open"></ftui-icon>
  </div>

Zitat von: yersinia am 30 November 2023, 07:38:05Ich hab nochmal in altem HTML code nachgeschaut und eine explizite binding Definition gefunden:

Code Auswählen Erweitern

<ftui-column width="20%">
  <div ftui-binding="style" [style]="windowProblem:state | map('0:`visbility: hidden;`, 1:`visbility: visible;`')">
    <ftui-icon class="size--3" name="window-open"></ftui-icon>
  </div>

Es gibt ein paar Unstimmigkeiten:
In den beiden oben zitierten Codeschnipseln heißt es einmal
<div ftui-binding [style]="windowProblem....
und dann
<div ftui-binding="style" [style]="windowProblem....

Ich vermute, dass letzteres korrekt ist und werde es mal ausprobieren.



PS: muss es nicht visibility heißen?

Zitat von: DocCyber am 30 November 2023, 11:23:07<div ftui-binding="style" [style]="windowProblem....
Ich vermute, dass letzteres korrekt ist und werde es mal ausprobieren.

Wie gesagt, so hab ich es mal genutzt. Ein versuch ist es wert.

Zitat von: DocCyber am 30 November 2023, 11:23:07PS: muss es nicht visibility heißen?

Ja, muss es (https://developer.mozilla.org/en-US/docs/Web/CSS/visibility?retiredLocale=de).  :o