FTUI3 Label

Zeilenumbruch im Label

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

Wenn allerdings komplexere HTML-Inhalte enthalten sind, z.B. <img ...>-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 input übergebene Label-Text an den eingefügten Zeilenumbrüchen
aufgespalten und in eine so genannte ungeordnete Liste (unordered list <ul>) umzuwandeln und zurückzugeben. In einem <ftui-label>-Element wird dies angewendet als

 <ftui-label [text]="DEVICE:READING | ftui_linebreaker()" scroll></ftui-label>

und resultiert in einer sauberen Ausrichtung der einzelnen Zeilen.