Zum Inhalt springen
fend-ui
Vorschau

Tree View

Struktur- und Dateibäume nach dem ARIA-Tree-Muster: Pfeiltasten bewegen den Fokus, rechts klappt auf oder springt zum ersten Kind, links klappt zu oder springt zum Elternknoten, der Stern klappt alle Geschwister auf, Tippen sucht per Typeahead. Einrückungslinien, Icons pro Knoten und Mehrfachauswahl sind optional; jede Aktion ist auch per Tastatur erreichbar.

Dateibaum

Klick oder Enter wählt einen Knoten, ein Klick auf einen Elternknoten klappt ihn zusätzlich auf. Auswahl und Aufklappzustand sind hier kontrolliert.

src
app
page.tsx
layout.tsx
globals.css
package.json
README.md

Mehrfachauswahl

Mit multiSelect ergänzt Strg- oder Cmd-Klick die Auswahl. Deaktivierte Knoten bleiben fokussierbar, lassen sich aber nicht auswählen oder aufklappen.

Team
Design
Entwicklung
Archiv
Produkt
Roadmap
Recherche

Ausgewählt: design

Tastatur

Der Fokus liegt per Roving tabIndex immer auf genau einem Knoten; die Bedienung folgt dem ARIA-Tree-Muster.

  • ↑ / ↓ bewegt den Fokus, Home und End springen an den Rand.
  • → klappt auf oder springt zum ersten Kind, ← klappt zu oder springt zum Elternknoten.
  • * klappt alle Geschwister auf, Tippen sucht per Typeahead, Enter oder Leertaste wählt aus.