FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: andreas_r am 16 Januar 2024, 08:33:19

Titel: [FTUI3] [GELÖST] ftui-tab-view per Klick auf Bild aktivieren?
Beitrag von: andreas_r am 16 Januar 2024, 08:33:19
Hallo zusammen,

gibt es eine Möglichkeit bei FTUI3 per Klick auf ein Bild auf einen anderen ftui-tab-view zu springen?
Theoretisch funktioniert es mit diesem Kontrukt:
<ftui-tab view="tab_name">
   <ftui-image src="xxx"></ftui-image>
</ftui-tab>

Allerdings passt dann die Positionierung des Bildes nicht mehr. Scheinbar werden hier zusätzliche CSS Klassen durch das ftui-tab Element hinzugefügt.

Gibt es noch eine andere Möglichkeit?

VG, Andreas
Titel: Aw: [FTUI3] ftui-tab-view per Klick auf Bild aktivieren?
Beitrag von: MDietrich am 16 Januar 2024, 17:45:50
Hallo Andreas,
ich würde das Bild in ein "ftui-grid" und "ftui-grid-tile" einfügen, damit sind Position und Größe zu regeln. Das Anklicken sollte mit @click="ViewName.open()" funktionieren.

Gruß,
Matthias
Titel: Aw: [FTUI3] ftui-tab-view per Klick auf Bild aktivieren?
Beitrag von: andreas_r am 17 Januar 2024, 11:49:41
Danke für die Rückmeldung. Ich habe das Bild bereits in einem Grid und Grid-Tile enthalten. Ich habe das leider zuerst verkürzt dargestellt, aber im Ganzen ist die Struktur natürlich so:

<ftui-grid>
  <ftui-grid-tile>
    <ftui-tab view="tab_name">
      <ftui-image src="xxx"></ftui-image>
    </ftui-tab>
  </ftui-grid>
</ftui-grid-tile>

Außerdem bekomme ich nur einen Fehler im Browser beim Anklicken, wenn ich das Bild mit einem "@click="ViewName.open()" definiere. (Fehlermeldung ist ViewName.open() is not a function)
Die ftui-tab-view mit dem entsprechenden Namen existiert natürlich.

Ich kenne das @click eigentlich so auch nur in der Verbindung mit Popups, nicht jedoch mit einem ftui-tab-view.

 
Titel: Aw: [FTUI3] ftui-tab-view per Klick auf Bild aktivieren?
Beitrag von: MDietrich am 17 Januar 2024, 14:47:04
Hallo Andreas,

schau einmal hier:
https://forum.fhem.de/index.php?topic=115259.msg1241191#msg1241191 (https://forum.fhem.de/index.php?topic=115259.msg1241191#msg1241191)


Ich das hilft dir weiter
Titel: Aw: [FTUI3] ftui-tab-view per Klick auf Bild aktivieren?
Beitrag von: andreas_r am 19 Januar 2024, 16:54:21
Danke, das wars. Mit dem Kontrukt hier geht es:

<ftui-grid>
  <ftui-grid-tile>
    <ftui-tab view="tab_name">
      <ftui-image src="xxx" @click="document.querySelector(`ftui-tab[view='View_Name']`).value='on'"></ftui-image>
    </ftui-tab>
  </ftui-grid>
</ftui-grid-tile>

Was vielleicht noch wichtig ist: Im Code muss sich nicht nur die View selbst
<ftui-tab-view id="View_Name">
sondern auch ein zugehöriges (kann auch verborgenes) Tab View Element befinden
<ftui-tab view="View_Name" hidden></ftui-tab>

Ansonsten erzeugt der Code (logischerweise) einen Fehler.