FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: BigGB am 15 Februar 2023, 19:25:29

Titel: [FTUI 3] Segment-button mit Icon u. Text untereinander
Beitrag von: BigGB am 15 Februar 2023, 19:25:29
Hallo,
gibt es eine Möglichkeit im Segment-Button ein Icon u. Text untereinander darzustellen?

In irgendeinm Thread habe ich es gesehen, kann mich nur nicht erinnern wer es dargestellt hatte :-[.

Ich versuche es hiermit, aber es klappt so nicht:
      <ftui-segment id="segment1">
        <ftui-segment-button value="off">
  <ftui-row>
    <ftui-icon path="./icons/openautomation" name="sani_heating_manual"></ftui-icon>
  </ftui-row>
  <ftui-row>
            <ftui-label>Manuell</ftui-label>
  </ftui-row>
        </ftui-segment-button>
        <ftui-segment-button value="on">
  <ftui-row>
  <ftui-icon path="./icons/openautomation" name="sani_heating_temp"></ftui-icon>
  </ftui-row>
  <ftui-row>
          <ftui-label>An</ftui-label>
  </ftui-row>
        </ftui-segment-button>
        <ftui-segment-button value="auto">
  <ftui-row>
  <ftui-icon path="./icons/openautomation" name="sani_heating_automatic"></ftui-icon>
  </ftui-row>
  <ftui-row>
          <ftui-label>Auto</ftui-label>
  </ftui-row>
        </ftui-segment-button>
  </ftui-segment>


Viele Grüße Gerald
Titel: Antw:[FTUI 3] Segment-button mit Icon u. Text untereinander
Beitrag von: juemuc am 15 Februar 2023, 20:21:36
Hi,

die hast aus meiner sicht zu viele <ftui-row>.

Alles was in eine Spalte soll, wird mit <ftui-row> und </ftui-row> umschlossen.

Viele Grüße
Jürgen
Titel: Antw:[FTUI 3] Segment-button mit Icon u. Text untereinander
Beitrag von: mr_petz am 15 Februar 2023, 21:22:45
Hi Gerald,
entweder in eine <ftui-cell> oder in <span> packen:


<ftui-segment id="segment1">
  <ftui-segment-button value="off">
   <ftui-cell>
    <ftui-row>
     <ftui-icon path="./icons/openautomation" name="sani_heating_manual"></ftui-icon>
    </ftui-row>
    <ftui-row>
     <ftui-label>Manuell</ftui-label>
    </ftui-row>
   </ftui-cell>
  </ftui-segment-button>
  <ftui-segment-button value="on">
   <ftui-cell>
    <ftui-row>
     <ftui-icon path="./icons/openautomation" name="sani_heating_temp"></ftui-icon>
     </ftui-row>
     <ftui-row>
      <ftui-label>An</ftui-label>
     </ftui-row>
   </ftui-cell>
  </ftui-segment-button>
  <ftui-segment-button value="auto">
   <ftui-cell>
    <ftui-row>
      <ftui-icon path="./icons/openautomation" name="sani_heating_automatic"></ftui-icon>
     </ftui-row>
     <ftui-row>
      <ftui-label>Auto</ftui-label>
     </ftui-row>
   </ftui-cell>
  </ftui-segment-button>
</ftui-segment>


Edit:
wobei man auch die row am label weg lassen könnte.
Am icon aber nicht (zumindest im <span>), da es sonst linksbündig und nicht zentriert dargestellt wird....

LG mr_petz
Titel: Antw:[FTUI 3] Segment-button mit Icon u. Text untereinander
Beitrag von: BigGB am 15 Februar 2023, 21:29:49
Zitat von: mr_petz am 15 Februar 2023, 21:22:45
Hi Gerald,
entweder in eine <ftui-cell> oder in <span> packen:

       
   <ftui-segment-button value="off">
<ftui-cell>
    <ftui-icon path="./icons/openautomation" name="sani_heating_manual"></ftui-icon>
            <ftui-label>Manuell</ftui-label>
</ftui-cell>
   </ftui-segment-button>

<ftui-row></ftui-row> noch entfernt.
Super mr_petz, danke das war es.

Edit: am icon <ftui-row> auch entfernt, wird mittig dargestellt.

Titel: Antw:[FTUI 3] Segment-button mit Icon u. Text untereinander
Beitrag von: mr_petz am 15 Februar 2023, 22:14:35
Super Danke für die Rückmeldung :)

Ja da gebe ich dir Recht. Im <ftui-cell> wird das icon mittig dargestellt.
Im <span> nicht. Hatte ich zuerst getestet. Da brauchste wieder eine <ftui-row>.
Habe es oben ergänzt...

LG mr_petz