[FTUI3] [GELÖST] ftui-tab-view per Klick auf Bild aktivieren?

[andreas_r]

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:

Code Auswählen Erweitern

<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

[MDietrich]

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

[andreas_r]

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:

Code Auswählen Erweitern

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

 

[MDietrich]

Hallo Andreas,

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


Ich das hilft dir weiter

[andreas_r]

Danke, das wars. Mit dem Kontrukt hier geht es:

Code Auswählen Erweitern

<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

Code Auswählen Erweitern

<ftui-tab-view id="View_Name">
sondern auch ein zugehöriges (kann auch verborgenes) Tab View Element befinden

Code Auswählen Erweitern

<ftui-tab view="View_Name" hidden></ftui-tab>

Ansonsten erzeugt der Code (logischerweise) einen Fehler.