[FTUI 3] Segment-button mit Icon u. Text untereinander

[BigGB]

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:

Code Auswählen Erweitern

      <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

[juemuc]

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

[mr_petz]

Hi Gerald,
entweder in eine <ftui-cell> oder in <span> packen:

Code Auswählen Erweitern


<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

[BigGB]

Hi Gerald,
entweder in eine <ftui-cell> oder in <span> packen:

Code Auswählen Erweitern

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

[mr_petz]

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