SmartVISU/IconHighlights in Menus: Unterschied zwischen den Versionen

Aktuelle Version vom 5. Juni 2025, 14:18 Uhr

Mit dem folgenden Code lassen sich, zum Beispiel innerhalb vom Hauptmenu oder in der Raumübersicht die Icons farbig kennzeichnen.

Bis smartVISU v2.6

<a href="index.php?page=room_living">
 <img class="icon" src="{{ page == 'room_living' ? icon1 : icon0 }}scene_livingroom.png"/><h3>Wohnzimmer</h3></a>

Ab smartVISU v2.7 werden svg-Icons verwendet und deren Stile mit Klassen festgelegt:

<a class="icon1" href="index.php?page=room_living" >
<img class="icon{% if page == 'room_living' %} icon1 {% else %} icon0{% endif %}" src="{{ icon0 }}scene_livingroom.svg" alt="Wohnzimmer" /><h3>Wohnzimmer</h3></a>

Ab smartVISU v3.4 gibt es die Designs mit Dark Mode. Hier ist es sinnvoll, im Raummenü die folgende Schreibweise zu nutzen:

<a href="index.php?page=room_living">
     {{ lib.svgimg ('', 'scene livingroom.svg', page == 'room_living'?'icon1':'icon0', '')
    <h3>Wohnzimmer</h3>
</a>

Vorteil dieser Methode ist zusätzlich, dass das Icon schon während des Renderns durch Twig eingebettet wird und damit vom smartVISU-Cache gespeichert wird. Das bewirkt bei großen Seiten deutliche Performancegewinne auf langsamen Servern.

Wenn der Code in einem übergeordneten List-Element ist, muss dieses noch die Klasse

class="ui-li-has-thumb"

erhalten.

@@ Zeile 1: / Zeile 1: @@
+{{SEITENTITEL:smartVISU/IconHighlights in Menus}}
 Mit dem folgenden Code lassen sich, zum Beispiel innerhalb vom Hauptmenu oder in der Raumübersicht die Icons farbig kennzeichnen.
-  <nowiki>
+Bis smartVISU v2.6
-<a href="index.php?page=room_living">
-<img class="icon" src="{{ page == 'room_living' ? icon1 : icon0 }}scene_livingroom.png"/><h3>Wohnzimmer</h3>
+  <nowiki><a href="index.php?page=room_living">
-</nowiki>
+ <img class="icon" src="{{ page == 'room_living' ? icon1 : icon0 }}scene_livingroom.png"/></nowiki><nowiki><h3>Wohnzimmer</h3></nowiki><nowiki></a></nowiki>
+Ab smartVISU v2.7 werden svg-Icons verwendet und deren Stile mit Klassen festgelegt:
+ <a class="icon1" href="index.php?page=room_living" >
+ <img class="icon{% if page == 'room_living' %} icon1 {% else %} icon0{% endif %}" src="<nowiki>{{ icon0 }}</nowiki>scene_livingroom.svg" alt="Wohnzimmer" /><nowiki><h3>Wohnzimmer</h3></nowiki><nowiki></a></nowiki>
+Ab smartVISU v3.4 gibt es die Designs mit Dark Mode. Hier ist es sinnvoll, im Raummenü die folgende Schreibweise zu nutzen:
+ <nowiki><a href="index.php?page=room_living">
+     {{ lib.svgimg (''</nowiki>, 'scene livingroom.svg', page == 'room_living'?'icon1':'icon0', <nowiki>''</nowiki>)
+ <nowiki> </nowiki>   <nowiki><h3>Wohnzimmer</h3></nowiki>
+ <nowiki></a></nowiki>
+Vorteil dieser Methode ist zusätzlich, dass das Icon schon während des Renderns durch Twig eingebettet wird und damit vom smartVISU-Cache gespeichert wird.  Das bewirkt bei großen Seiten deutliche Performancegewinne auf langsamen Servern.
+Wenn der Code in einem übergeordneten List-Element ist, muss dieses noch die Klasse
+ class="ui-li-has-thumb"
+erhalten.
+[[Kategorie: fronthem/smartVISU]]