Tree

Erstellet eine Navigations-Struktur

Dieses Widget ist generell mit Bootstrap v3 (http://getbootstrap.com) kompatibel. In der Version 3 wurde jedoch die Klasse .nav-list entfernt. Für eine optimlae Darstellung muss diese (siehe unten) extra definiert werden.

Beispiel Konfiguration:

group.link1.headline =Group 1 Label
group.link1.url =/a/a
group.link1.label =a-a
group.link2.url =/a/b
group.link2.label =a-b

group.group2.headline =Subgroup 2 Label
group.group2.link1.url =/a/a/a
group.group2.link1.label =a-a-a
group.group2.link2.url =/a/b/b
group.group2.link2.label =a-b-b

group2.link1.headline =Group 2 Label
group2.link1.url =/b/a
group2.link1.label =b-a
group2.link2.url =/b/b
group2.link2.label =b-b

Am Ende einer Kette werden die geschützten Schlüssel headline, url und label ausgewertet. Werden mehrere headline definiert, so wird das letzte in einer Gruppe verwendet.

<ul class="sidebar-menu" >
 <li class="treeview">
     <label class="nav nav-header">Group 1 Label</label>
     <ul class="nav nav-list">
         <li><a href="/a/a">a-a</a></li>
         <li><a href="/a/b">a-b</a></li>
         <li><label class="nav nav-header">Subgroup 2 Label</label>
            <ul class="nav nav-list">
                <li><a href="/a/a/a">a-a-a</a></li>
                <li><a href="/a/b/b">a-b-b</a></li>
            </ul>
         </li>
      </ul>
 </li>
 <li class="treeview">
     <label class="tree-toggler nav-header">Group 2 Label</label>
     <ul class="nav tree" >
         <li><a href="/b/a" >b-a</a></li>
         <li><a href="/b/b" >b-b</a></li>
     </ul>
 </li>
</ul>
</div>

Damit der Baum auch in Bootstrap eingerückt angezeigt wird, muss das folgende CSS eingebunden werden: