Übersicht
Resizable Split-Panels + Drag & Drop dynamische Splits für React
@byeolnaerim/flex-layoutist eine React-Komponente, die es ermöglicht, eine resizebare Split-Panel-UI und Drag & Drop-basierte dynamische Splits schnell zu erstellen.
Wenn es beispielsweise erforderlich ist, den linken Bereich für die Produktliste und den rechten Bereich für die Vorschau anzuzeigen, und beide Bereiche resizebar sein müssen, kann diese Bibliothek eine gute Lösung bieten.
Ursprungsgeschichte
Die erste @byeolnaerim/flex-layoutentstand, als ich als zweijähriger Entwickler versuchte, einen geschäftlichen Messenger auf Basis von Vanilla JS als persönliches Projekt zu erstellen.
Ich wollte, dass es wie Slack oder VSCode zwischen den Komponenten resizebar ist. Da mir die linke Ansicht von VSCode gut gefiel, wollte ich, dass das, was ich erstellt habe, ähnlich wie VSCode funktioniert.
Im Laufe der Zeit, als ich mit React anfing, habe ich dies in eine Komponente auf Basis von TypeScript, RxJS und React neu erstellt. Ich erweiterte die Funktionalität, um Drag & Drop für dynamische Split-Views zu ermöglichen, basierend auf meiner früheren Philosophie, dass es "fast wie VSCode" funktionieren sollte.
Wachstumsnormalisierung
@byeolnaerim/flex-layoutAls ich es ursprünglich erstellte, verstand ich flex-grow als OberlayoutFlexLayout und die Anzahl der KindcontainerFlexLayoutContainer als Obergrenze für das gesamte Wachstum.maxGrowIch verstand es als Konzept, die Verteilung der Anteile innerhalb dieser Container zu normalisieren.normalisieren(Das war eine falsche Interpretation.)
Wenn es beispielsweise zwei untergeordnete Container gibt, sollte das maximale Wachstum 2 sein, und bei einem Verhältnis von 30% / 70% sollte das tatsächliche Wachstum 0,668 / 1,332 betragen. Unter dieser Annahme haben sich die Korrekturlogiken zu dem entwickelt, was wir jetzt haben.@byeolnaerim/flex-layoutDas ist geworden.