ftui feature request, Image mit Labels versehbar

[Rothammel]

ich fände es toll wenn man Labels frei auf einem Image positionieren könnte um ein ähnliches Ergebnis wie im Anhang zu erreichen...

bei uns wird das ftui weniger zum Steuer sondern zum größten Teil zum Visualisieren genutzt, leider sind die alleinigen Werte doch sehr abstrakt 

[setstate]

Das geht jetzt schon irgendwie. Bild und Label müssen den selben Parent haben. Bild dann Position relative, Label Position absolute und dann mit top und left positionieren

Die passenden classes muss ich heute Abend mal raussuchen.

[Thorsten Pferdekaemper]

Mit FUIP müsste das auch relativ einfach gehen.

[setstate]

So könnte man es machen

Code Auswählen Erweitern


<li data-row="1" data-col="4" data-sizey="4" data-sizex="6">
    <header>EXAMPLE2</header>
    <div class="display">
        <div data-type="image" data-url="https://picsum.photos/200/125/?random" data-size="100%"></div>
        <div class="display-center bigger" data-type="label" data-get="ftuitest:pin"></div>
        <div class="display-topright bigger right-space top-space" data-type="label" data-get="ftuitest:minutes"></div>
        <div class="ontop bigger" style="left: 120px; top: 50px" data-type="label" data-get="ftuitest:datum"></div>
    </div>
</li>


zur Verfügung stehen:

• display-topleft
  display-topcenter
  display-topright
  display-centerleft
  display-left
  display-centerright
  display-right
  display-bottomleft
  display-bottomcenter
  display-bottomright

als Grundposition.

Feinjustage per:

• right-space
  top-space
  left-space
  bottom-space
  right-space-2
  top-space-2
  left-space-2
  bottom-space-2
  right-space-3
  top-space-3
  left-space-3
  bottom-space-3

oder direkt per Style-Tag

Code Auswählen Erweitern

class="ontop" style="left: 120px; top: 50px"