react spaces

Réagir les espaces

Système de mise en page facile à comprendre et niditable, les espaces réagissent vous permettent de diviser une page ou un conteneur en espaces ancrés, déficients et résidants vous permettant de créer des interfaces utilisateur de type bureau / mobile dans le navigateur.

Plutôt qu'une bibliothèque de composants d'interface utilisateur visuels, les espaces sont destinés à être les blocs fondamentaux réutilisables pour disposer d'une interface utilisateur qui répond soigneusement pour afficher les redimensions du port vous laissant les remplir avec les composants que vous voulez.

• Pas de style pour obtenir des dispositions simples ou complexes.
• Les espaces savent se comporter les uns par rapport aux autres et redimensionner en conséquence.
• Les espaces n'ont aucun élément visuel (même le rembourrage ou les marges). Vous pouvez les remplir de ce que vous voulez.

Version 0.2.0 version - Lire les notes de version ici.

Voir la documentation complète ici.

Espaces de niveau supérieur

Utilisé au niveau supérieur de tous les autres espaces.

<Fenêtre />

Cet espace reprendra la fenêtre complète de la fenêtre du navigateur. Le redimensionnement de la fenêtre du navigateur ajustera automatiquement la taille de cet espace et de tous les espaces imbriqués.

<Fixe />

Cet espace peut recevoir une hauteur et éventuellement une largeur (par défaut, il varie à 100% de son conteneur). Tous les espaces imbriqués seront contenus dans cet espace de taille fixe.

Espaces ancrés

Ceux-ci peuvent être utilisés dans les espaces de niveau supérieur <Vieille /> et <fixe /> ou imbriquées dans d'autres espaces.

<Left /> et <droite />

Un espace ancré à gauche ou à droite du conteneur parent / espace. Une taille peut être spécifiée en pixels ou en pourcentage pour déterminer sa largeur.

<Top /> et <inférieur />

Un espace ancré en haut ou en bas du conteneur / espace parent. Une taille peut être spécifiée en pixels ou en pourcentage pour déterminer sa hauteur.

Il existe des versions redimencables de ces composants appelés <lefTresiable /> , <RightreSizable /> , <Topresizable /> et <Bottom Ressizable /> qui permettent aux espaces d'être réshibés à partir du bord extérieur en faisant glisser avec la souris.

Autre

<Fill />

Un espace qui consomme toute zone disponible dans le conteneur / espace parent en tenant compte des espaces ancrés de chaque côté.

<Positionné />

Un espace qui peut être absolument placé dans un espace parent soit en haut, en gauche, en largeur et en hauteur ou en haut, à gauche, à droite et en bas.

<Couche />

Les couches vous permettent de créer des couches dans un espace parent, par exemple:

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

<Centre />

Centre le contenu d'un espace horizontalement et verticalement.

<Centraveur />

Centre le contenu d'un espace verticalement.

Commencer

Pour commencer avec les espaces React dont vous avez besoin:

 npm install react - spaces -- save 

 import * as Spaces from "react-spaces" ;

Voir la documentation complète ici.

Donation

Si vous trouvez cette bibliothèque utile, pensez à faire un petit don pour financer une tasse de café: