[ERLEDIGT] [FTUI3] Problem mit "display: none;"

[DocCyber]

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

Code Auswählen Erweitern

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

[yersinia]

Ich denke du solltest ftui-binding auch einbinden:

Code Auswählen Erweitern

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

Code Auswählen Erweitern

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

Code Auswählen Erweitern

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

[DocCyber]

Ich 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

Code Auswählen Erweitern

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

Code Auswählen Erweitern

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

[yersinia]

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

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>Meine letzten Versuche mit ftui-binding auf nicht-FTUI3-Elementen liefen eigtl wie erwartet, ist aber auch schon mind 1 Jahr her.

[DocCyber]

Ich würde hier auch ein Reading erwarte, wenn es nicht state sein soll

Es ist aber state. 

[yersinia]

Es ist aber state. 

hast du es mal explizit angegeben?

Ich 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>In einer Version habe ich auch class (anstelle von class-name) verwendet.

[DocCyber]

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>

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

[yersinia]

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

PS: muss es nicht visibility heißen?

Ja, muss es.