FTUI3 Label

Zeilenumbruch im Label

Wenn der Inhalt des Labels nur aus Text besteht, kann ein Zeilenumbruch durch das Einfügen des Strings
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('
');
 let num=linea.length;

let ret='

'; for (var i = 0; i < num; i++) { ret+='
• '+linea[i]+'
'; } ret+='

';

 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

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