react spaces

REACT SPACES

Un sistema de diseño fácil de entender y nestable, los espacios reaccionados le permiten dividir una página o contenedor en espacios anclados, desplazables y reiniciables que le permiten construir interfaces de usuario de escritorio/tipo móvil en el navegador.

En lugar de una biblioteca de componentes visuales de la interfaz de usuario, los espacios están destinados a ser los bloques fundamentales reutilizables para diseñar una interfaz de usuario que responda perfectamente para ver los modificaciones del puerto, dejándolo para llenarlos con los componentes que desee.

• No hay estilo para lograr diseños simples o complejos.
• Los espacios saben cómo comportarse en relación entre sí y cambiar el tamaño en consecuencia.
• Los espacios no tienen ningún elemento visual (incluso acolchado o márgenes). Puedes llenarlos con lo que quieras.

Versión 0.2.0 Release - Lea las notas de la versión aquí.

Ver documentación completa aquí.

Espacios de nivel superior

Utilizado en el nivel superior de todos los demás espacios.

<Viewport />

Este espacio se hará cargo de la ventana gráfica completa de la ventana del navegador. El cambio de tamaño de la ventana del navegador ajustará automáticamente el tamaño de este espacio y todos los espacios anidados.

<Fijo />

Este espacio puede recibir una altura y opcionalmente un ancho (por defecto, el tamaño del 100% de su contenedor). Todos los espacios anidados estarán contenidos dentro de este espacio de tamaño fijo.

Espacios anclados

Estos se pueden usar dentro de los espacios de nivel superior <Viewport /> y <deado /> o anidado dentro de otros espacios.

<Izquierdo /> y <derecho />

Un espacio anclado a la izquierda o a la derecha del contenedor/espacio principal. Se puede especificar un tamaño en píxeles o como porcentaje para determinar su ancho.

<Pop /> y <Bottom />

Un espacio anclado a la parte superior o inferior del contenedor/espacio principal. Se puede especificar un tamaño en píxeles o como porcentaje para determinar su altura.

Existen versiones reacondicionables de estos componentes llamados <Leftresizable /> , <rightResizable /> , <topResizable /> y <BottomResizable /> que permiten que los espacios se reduzcan desde el borde exterior arrastrándose con el mouse.

Otro

<Relleno />

Un espacio que consume cualquier área disponible que quede en el contenedor/espacio principal teniendo en cuenta los espacios anclados en cada lado.

<Posicionado />

Un espacio que se puede colocar absolutamente dentro de un espacio principal, ya sea por arriba, izquierda, ancho y altura o por arriba, izquierda, derecha e inferior.

<Capa />

Las capas le permiten crear capas dentro de un espacio principal, por ejemplo:

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

<Centrado />

Centra el contenido de un espacio horizontal y verticalmente.

<Centeredvertical />

Centra el contenido de un espacio verticalmente.

Empezando

Para comenzar con los espacios React que necesita:

 npm install react - spaces -- save 

 import * as Spaces from "react-spaces" ;

Ver documentación completa aquí.

Donación

Si encuentra útil esta biblioteca, considere hacer una pequeña donación para financiar una taza de café: