react spaces

Räume reagieren

Reaktionsräume mit einem leicht verständlichen und nestbaren Layout -System können Sie eine Seite oder einen Container in verankerte, scrollbare und setzbare Räume teilen, sodass Sie im Browser Desktop-/Mobile -Benutzeroberflächen erstellen können.

Anstelle einer Bibliothek mit visuellen UI -Komponenten sollen Leerzeichen die wiederverwendbaren Grundblöcke für die Auslegung einer Benutzeroberfläche sein, die ordentlich auf die Anzeige der Port -Abschlüsse reagiert, damit Sie sie mit den gewünschten Komponenten ausfüllen.

• Kein Styling, um einfache oder komplexe Layouts zu erreichen.
• Räume wissen, wie man sich in Bezug aufeinander verhalten und die Größe entsprechend ändern.
• Leerzeichen haben kein visuelles Element (sogar Polster oder Ränder). Sie können sie mit allem füllen, was Sie wollen.

Version 0.2.0 Release - Lesen Sie die Versionshinweise hier.

Die vollständige Dokumentation hier anzeigen.

Oberste Ebene

Verwendet in der oberen Ebene aller anderen Räume.

<Viewports />

Dieser Raum übernimmt das vollständige Ansichtsfenster des Browserfensters. Durch die Größe des Browserfensters wird die Größe dieses Raums und alle verschachtelten Räume automatisch eingestellt.

<Fixes />

Dieser Speicherplatz kann eine Höhe und optional eine Breite erhalten (standardmäßig wird er auf 100% des Containers erhält). Alle verschachtelten Räume werden in diesem Raum festgelegt.

Verankerte Räume

Diese können in den Räumen der oberen Ebene <Ansichtsfenster /> und <Fixes /> oder in anderen Räumen verwendet werden.

<Links /> und <rechts />

Ein Raum verankert nach links oder rechts am übergeordneten Container/Raum. Eine Größe kann in Pixeln oder als Prozentsatz angegeben werden, um die Breite zu bestimmen.

<top /> und <unten />

Ein Raum verankert am oberen oder unteren Boden des übergeordneten Containers/Raums. Eine Größe kann in Pixeln oder als Prozentsatz angegeben werden, um ihre Höhe zu bestimmen.

Es gibt resizbare Versionen dieser Komponenten, die als <leftresizable /> , <rightresible /> , <TopResible /> und <bottoResible /> bezeichnet werden, und ermöglichen es, dass die Räume durch Ziehen mit der Maus von der Außenkante angegriffen werden.

Andere

<Fill />

Ein Raum, in dem alle verfügbaren Bereiche im Eltern -Container/-Raum genutzt werden, wobei alle verankerten Räume auf jeder Seite berücksichtigt werden.

<positionen />

Ein Raum, der in einem übergeordneten Raum entweder nach oben, links, Breite und Höhe oder nach oben, links, rechts und unten platziert werden kann.

<schicht />

Mit Schichten können Sie Schichten innerhalb eines übergeordneten Raums erstellen, zum Beispiel:

 < ViewPort >
	< Layer zIndex =" {0} " > < LeftResizable size =" 20% " /> // floating sidebar </ Layer >
	< Layer zIndex =" {1} " >
		< Fill />
	</ Layer >
</ ViewPort >

<Zentriert />

Zentriert den Inhalt eines Raums horizontal und vertikal.

<Zentriert />

Zentriert den Inhalt eines Raums vertikal.

Erste Schritte

Um mit React -Räumen zu beginnen, die Sie benötigen:

 npm install react - spaces -- save 

 import * as Spaces from "react-spaces" ;

Die vollständige Dokumentation hier anzeigen.

Spende

Wenn Sie diese Bibliothek nützlich finden, sollten Sie eine kleine Spende zur Finanzierung einer Tasse Kaffee erstellen: