react spaces

Reaja espaços

Um sistema de layout fácil de entender e nidable, os espaços reagentes permitem dividir uma página ou contêiner em espaços ancorados, roláveis ​​e redimensíveis, permitindo que você crie interfaces de usuário do tipo de mesa/celular no navegador.

Em vez de uma biblioteca de componentes visuais da interface do usuário, os espaços devem ser os blocos fundamentais reutilizáveis ​​para colocar uma interface do usuário que responde ordenadamente para visualizar a porta redimensiona, deixando você preencher -os com os componentes que desejar.

• Não há estilo para obter layouts simples ou complexos.
• Os espaços sabem como se comportar em relação um ao outro e redimensionar de acordo.
• Os espaços não têm nenhum elemento visual para eles (mesmo preenchimento ou margens). Você pode preenchê -los com o que quiser.

Versão 0.2.0 Release - Leia as notas de lançamento aqui.

Veja a documentação completa aqui.

Espaços de nível superior

Usado no nível superior de todos os outros espaços.

<Viewport />

Este espaço assumirá a visualização completa da janela do navegador. O redimensionamento da janela do navegador ajustará automaticamente o tamanho desse espaço e todos os espaços aninhados.

<Fixado />

Esse espaço pode receber uma altura e, opcionalmente, uma largura (por padrão, ele dimensionará 100% do seu contêiner). Todos os espaços aninhados estarão contidos nesse espaço de tamanho fixo.

Espaços ancorados

Estes podem ser usados ​​nos espaços de nível superior <viewport /> e <fixado /> ou aninhados em outros espaços.

<Esquerda /> e <direita />

Um espaço ancorado à esquerda ou à direita do recipiente/espaço pai. Um tamanho pode ser especificado em pixels ou como uma porcentagem para determinar sua largura.

<Top /> e <inferior />

Um espaço ancorado na parte superior ou inferior do recipiente/espaço pai. Um tamanho pode ser especificado em pixels ou como uma porcentagem para determinar sua altura.

Existem versões redimensíveis desses componentes chamados <LeftResizable /> , <RightResizable /> , <topResizable /> e <BottomResizable /> permitem que os espaços sejam redimensionados da borda externa arrastando -se com o mouse.

Outro

<Preenchimento />

Um espaço que consome qualquer área disponível deixada no contêiner/espaço pai, levando em consideração quaisquer espaços ancorados em todos os lados.

<Posicionado />

Um espaço que pode ser absolutamente colocado dentro de um espaço pai, por cima, esquerda, largura e altura ou superior, esquerda, direita e inferior.

<Camada />

As camadas permitem que você crie camadas dentro do espaço dos pais, por exemplo:

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

<Centrado />

Centra o conteúdo de um espaço horizontal e verticalmente.

<Centedvertictical />

Centra o conteúdo de um espaço verticalmente.

Começando

Para começar com os espaços de reação que você precisa:

 npm install react - spaces -- save 

 import * as Spaces from "react-spaces" ;

Veja a documentação completa aqui.

Doação

Se você achar útil esta biblioteca, considere fazer uma pequena doação para financiar uma xícara de café: