react complex tree
2.4.6
Eine frei zugängliche Baumkomponente mit Mehrfachauswahl und Drag-and-Drop
Schauen Sie sich die offizielle Dokumentation an, um weitere Beispiele und eine umfassendere Dokumentation zu sehen. Viele häufig auftretende Probleme oder Fragen werden auf der FAQ-Seite behandelt.
Das Changelog ist unter https://rct.lukasbach.com/docs/changelog verfügbar. Überprüfen Sie die Versionshinweise zu Version 2, wenn Sie von Version 1.x auf Version 2.x migrieren.
Die Entwicklung von React-Complex-Tree wird von der Community unterstützt. Besonderer Dank geht an:
Finden Sie heraus, wie Sie die Entwicklung von React-Complex-Tree unterstützen können.
Um React Complex Tree zu verwenden, installieren Sie es als Abhängigkeit über in Ihrem Projekt
npm install react-complex-tree
yarn add react-complex-tree
Importieren Sie es dann und fügen Sie Ihre Baumstruktur hinzu
import { UncontrolledTreeEnvironment , Tree , StaticTreeDataProvider } from 'react-complex-tree' ;
< UncontrolledTreeEnvironment
dataProvider = { new StaticTreeDataProvider ( longTree . items , ( item , data ) => ( { ... item , data } ) ) }
getItemTitle = { item => item . data }
viewState = { { } }
>
< Tree treeId = "tree-1" rootItem = "root" treeLabel = "Tree Example" / >
< / UncontrolledTreeEnvironment > ;Weitere Details finden Sie im Leitfaden „Erste Schritte“. Der Leitfaden zur Datenintegration mit einem statischen Baumdatenanbieter ist auch ein guter Ausgangspunkt, um zu verstehen, wie Daten mit React Complex Tree integriert werden.
Meinungslos
React Complex Tree macht keine Annahmen über die Ästhetik Ihres Webdesigns oder der von Ihnen verwendeten Technologien. Das Rendering liegt ganz bei Ihnen und jeder in DOM geschriebene Knoten kann angepasst werden. Zur Vereinfachung der Integration werden sinnvolle Standardeinstellungen bereitgestellt, die durch leicht anpassbare CSS-Klassen gestaltet sind.
Zugänglich
Die Baumstruktur entspricht der W3C-Spezifikation für barrierefreie Bäume. Es unterstützt Bildschirmleseprogramme und implementiert alle gängigen Tastaturinteraktionen, sodass jede Interaktion, vom Verschieben des Fokus bis zum Ziehen von Elementen, ohne Verwendung der Maus möglich ist.
Leistungsstarkes Drag & Drop
Der Baum bietet die erwarteten Funktionen, die Power-User von erweiterten Tools erwarten. Wählen Sie so viele Elemente aus, wie Sie möchten, und ziehen Sie sie an eine beliebige Stelle innerhalb desselben oder eines anderen Baums! React Complex Tree verfügt über viele Anpassungsoptionen für Drag & Drop, z. B. das Verbieten einer Neuanordnung oder das Aktivieren von Drag & Drop nur für bestimmte Elemente.
Vollständige Tastatursteuerung
Der Baum ist vollständig über die Tastatur steuerbar. Es implementiert alle vom W3C vorgeschlagenen Steuerelemente, um Bäume zugänglich zu machen, und bietet weitere Steuerelemente für Drag & Drop, Suchen oder Umbenennen von Elementen.
Keine Abhängigkeiten
Wir wissen, wie ärgerlich es ist, ein Paket hinzuzufügen und am Ende Hunderte von Peer-Abhängigkeiten zu haben. Da React Complex Tree keine Annahmen über Ihre Abhängigkeiten macht, müssen wir Ihr Projekt auch nicht mit weiteren Paketen überladen. Wenn Sie React Complex Tree zu Ihrem Paket hinzufügen, fügen Sie nur diese und keine weiteren Abhängigkeiten hinzu.
Mehrfachauswahl
Im Gegensatz zu anderen, einfacheren Baumbibliotheken können Sie mit React Complex Tree so viele Elemente auswählen, wie Sie möchten, und sie alle auf einmal verschieben, indem Sie sie an einen anderen Ort ziehen. Warum sollten Sie Ihren Benutzern weniger Funktionalität bieten, wenn Sie ohne zusätzlichen Aufwand leistungsstarke Baumfunktionen anbieten können? Probieren Sie es in der Demo oben aus und wählen Sie mehrere Elemente gleichzeitig aus, indem Sie die Steuerung auf Ihrer Tastatur gedrückt halten, während Sie auf Elemente klicken, und dann alle auf einmal an eine andere Position ziehen.
Umbenennen eingebaut
React Complex Tree bietet mit seinen Funktionen die Umbenennung als native Funktion. Wählen Sie ein beliebiges Element aus und drücken Sie F2, um mit der Umbenennung des Elements zu beginnen. Dies bietet eine intuitivere Möglichkeit, Elemente für Benutzer umzubenennen, ohne benutzerdefinierte Dialoglösungen zu implementieren, die den Arbeitsablauf Ihrer Benutzer stärker stören.
Suchfunktion
Haben Sie jemals versucht, in einem riesigen, chaotischen Dateibaum eine Datei zu finden, von der Sie wissen, dass sie vorhanden ist, aber keine Ahnung haben, wo? Beginnen Sie einfach mit der Eingabe, während Sie den Baum fokussieren, und das erste Element, das Ihrer Suche entspricht, wird angezeigt. Dies verbessert auch die Zugänglichkeit des Baums, da Benutzer, die nur über die Tastatur verfügen, einfacher durch die Baumstruktur navigieren können.
Multi-Tree-Umgebungen
Sie können in Ihrer Web-App mehrere Bäume verwenden, die einen gemeinsamen Zustand haben und miteinander interagieren können. Die Status- und Baumelemente werden einer gemeinsamen React-Provider-Komponente bereitgestellt, und beliebig viele Bäume können problemlos integriert werden, indem einfach Baumkomponenten unterhalb des Providers hinzugefügt werden. Die Bäume müssen keinen eigenen Status angeben, sie benötigen lediglich eine ID und ihr Stammelement, die gesamte andere Logik wird vom Anbieter verwaltet.
Kontrollierte und unkontrollierte Schnittstellen
Der einfachste Weg, React Complex Tree zu verwenden, ist die Verwendung einer unkontrollierten Baumumgebung, die den Baumstatus, d. h. welche Elemente ausgewählt, erweitert usw. sind, selbst beibehält. Sie müssen lediglich einen Datenanbieter bereitstellen, der definiert, wie Elemente asynchron geladen werden, und die Umgebung erledigt den Rest. Wenn Sie jedoch mehr Kontrolle wünschen, können Sie stattdessen die kontrollierte Umgebung zur vollständigen Anpassung verwenden.
Unterstützt von React und TypeScript
React Complex Tree basiert auf React (duh) und lässt sich einfach in bestehende React-Projekte integrieren, indem einfach die bereitgestellten Komponenten importiert und verwendet werden. Umfassende Typinformationen werden als TypeScript-Schnittstellen bereitgestellt, die die Integration erleichtern und für zusätzliche Typsicherheit sorgen, unabhängig davon, ob Sie TypeScript in Ihrem Projekt verwenden oder nicht.
Wenn Sie RCT lokal entwickeln möchten, finden Sie hier einige Hinweise:
yarn aus, um Abhängigkeiten zu installierenyarn build einmal lokal aus, bevor Sie irgendwelche Entwicklungsbefehle ausführenyarn start aus, um docusaurus und das Paket im Überwachungsmodus zu starten, und/oder yarn storybook um „storybook“ auszuführen
