react paneless
1.0.0
Ein minimaler Fenstermanager, der in Ihre ReactJS-App integriert werden kann.
Ich entwickle Panelless zur Verwendung in einer größeren App. Ich möchte mehrere überlappende Fenster anzeigen können. Jedes „Fenster“ wird Frame genannt. Hier ist ein Screenshot eines Frames meiner App mit fünf Fenstern .
Der gesamte App-Inhalt wird in Bereichen gerendert.
Frames können auf Miniaturbildgröße minimiert werden.
Die Kopfzeile (auch bekannt als Titelleiste) und Fußzeile (auch bekannt als Statusleiste) eines Frames können ausgeblendet sein. Wenn eine Kopfzeile ausgeblendet ist, können Sie den Rahmen dennoch verschieben, indem Sie mit der Maus über den oberen Rand fahren.
Scheiben werden in Rahmen gerendert.
Jeder Bereich kann geteilt werden, sodass ein einzelner Rahmen ein beliebiges Layout mehrerer Bereiche enthalten kann.
Registerkartenfenster werden von dieser Bibliothek implementiert.
Diese Bibliothek unterstützt dauerhafte Layouts.
Blaue Linien zeigen den Rahmen/Bereich mit Benutzerfokus an. Mit den Tasten Alt-f und Alt-p können Sie durch Frames und Fenster navigieren. Alt-B aktiviert das Menü des fokussierten Bereichs. Durch erneutes Drücken von Alt-B wird das Menü des zugehörigen Frames aktiviert. Mit den Pfeiltasten können Sie durch die Menüelemente navigieren, und Escape (oder Klicken auf eine beliebige Stelle außerhalb) schließt das Menü.
Der blaue Umriss, der den fokussierten Bereich anzeigt, erscheint nur für ein paar Sekunden und wird dann ausgeblendet, um den Inhalt der App in diesem Bereich nicht zu verdecken.
Die Größe eines Rahmens wird mit der Maus angepasst, indem Sie mit der Maus über die untere rechte Ecke fahren.
Frühe Entwicklung. Bisher nur auf Chrome ausprobiert.
Dieses Repository enthält eine Beispiel-App. Die folgenden Bilder zeigen die Beispiel-App und veranschaulichen die Funktionen.
Ich denke, es sollte auch erwähnt werden, dass Paneless das Rendern von Frames (normal und minimiert) in einem App-Frame übernimmt, der über einen App-Header und einen App-Footer verfügt.
Die Schaltflächenleiste eines Bereichs wird angezeigt, wenn Sie mit der Maus über den oberen Rand des Bereichs fahren.
Klonen Sie dieses Repository in einem Verzeichnis auf Ihrem Computer. Dann spielen Sie einfach mit der Beispiel-App herum.
Oder, wenn Sie bereits eine App haben, in die Sie sie einbinden möchten, dann tun Sie Folgendes:
npm install <paneless-directory>
Dabei ist <paneless-directory> das Verzeichnis, in das Sie dieses Repository geklont haben.
Sehen Sie sich die Beispiel-App an.
MIT © BradDunagan
