FTUI3 Label: Unterschied zwischen den Versionen
(Die Seite wurde neu angelegt: „==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_…“) |
|||
| (Eine dazwischenliegende Version desselben Benutzers wird nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
==Zeilenumbruch im Label== | ==Zeilenumbruch im Label== | ||
Wenn der Inhalt des Labels nur aus Text besteht, kann ein Zeilenumbruch durch das Einfügen des Strings <code> | 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: | 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: | ||
<pre> | |||
<script> | <script> | ||
const ftui_linebreaker = () => input => linebreaker(input); | const ftui_linebreaker = () => input => linebreaker(input); | ||
... | ... | ||
//-- helper function for linebreak | //-- helper function for linebreak | ||
function linebreaker(lines){ | function linebreaker(lines){ | ||
let linea = lines.split('<br>'); | let linea = lines.split('<br>'); | ||
| Zeile 18: | Zeile 18: | ||
return ret; | 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> | </pre> | ||
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 | |||
<pre> | |||
<ftui-label [text]="DEVICE:READING | ftui_linebreaker()" scroll></ftui-label> | <ftui-label [text]="DEVICE:READING | ftui_linebreaker()" scroll></ftui-label> | ||
</pre> | |||
und resultiert in einer sauberen Ausrichtung der einzelnen Zeilen. | und resultiert in einer sauberen Ausrichtung der einzelnen Zeilen. | ||
[[Kategorie:FHEM Tablet UI V3]] | [[Kategorie:FHEM Tablet UI V3]] | ||
Aktuelle Version vom 4. Juni 2025, 14:41 Uhr
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 <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.