Navigation mit SVG-Icon pro Navigationspunkt

Nutzbar ab: Version 17.x

Veröffentlichungsdatum: 25. April 2023
Änderungsdatum: 24. Februar 2025

navigation grafik bild svg icon

Navigationen über Bilder bzw. Icons in der Darstellung optimieren

Navigation mit SVG-Icon
Navigation mit SVG-Icon

Die BASE erlaubt in aktueller Version, eigene SVG-Icons pro Navigationspunkt zu nutzen. Hierzu ist das Navigationstemplate (full.wNavigation.php) und die zugehörige Navigations-SCSS-Datei entsprechend vorbereitet. Ebenso ist die Plfegemaske für die Navigationsbearbeitung schon mit dem erforderlichen Attribut ausgestattet, über welches der Pfad zum SVG-Icon gepflegt werden kann. Das Attribut muss auf editable="1" gesetzt sein, damit zur Navigationsbearbeitung das Icon-Feld erscheint.

Beispiel: Auszug aus /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/editor/navigation/attributes.wEditorNavpoint.php

...
  <attribute name="iconImg" editor="file" pathIfEmpty="$WSLPRE[wProjectLayoutPath]/wGlobal/layout/images/svg-icons" value="" caption="Icon" editable="1" levelsEditable="1"/>
...
Navigationsbearbeitung: Feld Icon für SVG-Icon
Navigationsbearbeitung: Feld Icon für SVG-Icon

In der Bearbeitung können Sie die gewünschte SVG-Grafik über den Dateiexplorer auswählen.

Bei installiertem Weblic® "SVG Icon" können Sie übrigens direkt die darüber bereitgestellten SVG-Icons zur Umsetzung einer Navigation mit Icons nutzen.

Weiterführende Links

Online-Doku: Bearbeiten einer Navigationsdatei
Online-Doku: Pflegemaske zur Navigationsbearbeitung
Navigation mit grafischen Buttons umsetzen
Font Awesome für Navigationssymbole nutzen
FAQs
Ab welcher Version ist die Navigation mit eigenen SVG-Icons pro Navigationspunkt nutzbar?
Nutzbar ab **Version 17.x**.
Wie können eigene SVG-Icons pro Navigationspunkt in der Navigation genutzt werden?
Die aktuelle Version ermöglicht, **eigene SVG-Icons pro Navigationspunkt** zu nutzen. Dafür sind das **Navigationstemplate** (full.wNavigation.php) sowie die zugehörige **Navigations-SCSS-Datei** entsprechend vorbereitet. Außerdem ist die **Plfegemaske** für die Navigationsbearbeitung bereits mit dem nötigen Attribut ausgestattet, über das der Pfad zum SVG-Icon gepflegt werden kann.
Welches Attribut muss gesetzt sein, damit das Icon-Feld in der Navigationsbearbeitung erscheint?
Das Attribut muss auf **editable="1"** gesetzt sein, damit das **Icon-Feld** in der Navigationsbearbeitung angezeigt wird.
Welche Einstellung ist für das Icon-Attribut in der Navigationskonfiguration relevant?
Im Beispiel wird ein Attribut wie folgt verwendet: - <code class="codeInline">name="iconImg"</code> - <code class="codeInline">editor="file"</code> - <code class="codeInline">pathIfEmpty="$WSLPRE[wProjectLayoutPath]/wGlobal/layout/images/svg-icons"</code> - <code class="codeInline">value=""</code> - **<code class="codeInline">editable="1"</code>** Damit kann der Pfad zu einem SVG-Icon gepflegt werden.
Wo wird der Pfad zum SVG-Icon in der Navigationsmaske gepflegt?
Über das in der Navigationsbearbeitungsmaske vorgesehene Attribut, das den **Pfad zum SVG-Icon** festlegt (sofern **editable="1"** gesetzt ist, damit das Icon-Feld erscheint).
Wie wählt man in der Bearbeitung ein SVG-Icon aus?
In der Bearbeitung können Sie die gewünschte SVG-Grafik **über den Dateiexplorer auswählen**.
Gibt es bei installiertem „SVG Icon“ bereits fertige SVG-Icons für die Navigation?
Ja. Bei installiertem **„SVG Icon“** können Sie die **direkt bereitgestellten SVG-Icons** zur Umsetzung einer Navigation mit Icons nutzen.