TreeView: Adaptivity

Zurück: Demo-Übersicht

Status: [Live]. Referenz: DevExpress Baum-Adaptive-Modi.

TreeView- Basiskontrakt bereits verstanden.

tree() lebt heute ausschließlich in der Sidebar-Region (layout → SidebarPart), die selbst per resize + overflow: auto container-responsive ist (Zutat 5 im CSS-Rezept, s. DataGrid → Adaptivity). Der Baum selbst hat kein eigenes Breakpoint-Verhalten — lange Labels brechen um oder werden vom Sidebar-overflow abgeschnitten, je nach Sidebar-Breite.

Aufruf wie in der API-Referenz dokumentiert.

Relevant, sobald die Sidebar auf kollabierte Icon-Breite (s. admin-layout) reduziert wird und der Baum weiterhin nutzbar bleiben soll.

Eine sehr schmale Sidebar (kollabierter Zustand, Marker .wk-shell-sidebar.is-collapsed) reduziert den Baum auf reine Icon-Knoten, statt Text abzuschneiden — reine CSS-Sichtbarkeit auf denselben Knoten, kein separates Markup.

echo $widgets->tree([
    ['label' => 'Tabellen', 'href' => wl($ID, ['t' => 'x']), 'icon' => '<i class="fa fa-table"></i>'],
]);

• Knoten ohne icon sind im kollabierten Zustand unsichtbar — Icons sind dort faktisch Pflicht (dieselbe Regel wie bei NavBar → Adaptivity).

title-Tooltips allein sind für Screenreader unzuverlässig — deshalb setzt tree() bei Icon-Knoten label zusätzlich als aria-label am Link (der zugängliche Name überlebt das CSS-Ausblenden des Textknotens).

Symptom: Im kollabierten Zustand verschwinden Knoten komplett.

Ursache: Knoten ohne icon (s. Abschnitt 9).

Lösung: jedem Knoten ein icon geben oder den Kollaps-Zustand für diese Sidebar nicht anbieten.

• Demo-Übersicht — alle Kategorien
• DataGrid: Adaptivity — identisches Container-Prinzip beim DataGrid