Quelltext der Seite FTUI3 Label

==Zeilenumbruch im Label==
Wenn der Inhalt des Labels nur aus Text besteht, kann ein Zeilenumbruch durch das Einfügen des Strings <code><br></code> erzwungen werden.

Wenn allerdings komplexere HTML-Inhalte enthalten sind, z.B.  <code><img ...></code>-Elemente, werden solche Zeilenumbrüche ignoriert. Mittels eines einfachen Tricks kann allerdings Abhilfe geschaffen werden. Dazu definiert man im Seitenheader etwas JavaScript-Code:
 <script>
  const ftui_linebreaker = () => input => linebreaker(input);
  ...
  //-- helper function for linebreak
  function linebreaker(lines){
  let linea = lines.split('<br>');
  let num=linea.length;
  let ret='<ul style="list-style-type:none;margin-left:0px;">';
  for (var i = 0; i < num; i++) {
       ret+='<li>'+linea[i]+'</li>';
  }
  ret+='</ul>';
  return ret;
 }
Mit dieser Funktion wird der in der Variablen <code>input</code> übergebene Label-Text an den eingefügten Zeilenumbrüchen <code><br></code> aufgespalten und in eine so genannte ungeordnete Liste (unordered list <code><ul></code>) umzuwandeln und zurückzugeben. In einem <code><ftui-label></code>-Element wird dies angewendet als 
 <ftui-label [text]="DEVICE:READING | ftui_linebreaker()" scroll></ftui-label>
und resultiert in einer sauberen Ausrichtung der einzelnen Zeilen.
[[Kategorie:FHEM Tablet UI V3]]