react spaces

反应空间

一个易于理解且可嵌套的布局系统，React Spaces可以使您可以将页面或容器分为锚定，可滚动和可重大的空间，从而使您能够在浏览器中构建台式机/移动类型的用户接口。

空格不是可重复使用的基础块，用于构建UI，而不是视觉UI组件的库，它响应了整齐的端口，以查看端口调整尺寸，使您可以用所需的任何组件填充它们。

• 没有样式来实现简单或复杂的布局。
• 空间知道如何相互关系并相应地调整大小。
• 空间没有任何视觉元素（甚至是填充或边距）。您可以用任何想要的东西填充它们。

版本0.2.0版本 - 此处读取发行说明。

在此处查看完整的文档。

顶级空间

在所有其他空间的顶层使用。

<视口 />

这个空间将接管浏览器窗口的完整视口。调整浏览器窗口的大小将自动调整此空间和所有嵌套空间的大小。

<固定 />

可以给该空间一个高度和宽度（默认情况下，它将大小约为容器的100％）。所有嵌套空间都将包含在此固定尺寸空间中。

锚定空间

这些可以在顶级空间<viewport />和<fixed />中使用，也可以在其他空间内嵌套。

<左 />和<右 />

锚定在父容器/空间的左侧或右侧的空间。可以以像素或百分比指定尺寸以确定其宽度。

<top />和<bottom />

锚定在父容器/空间的顶部或底部的空间。可以以像素或一个百分比指定尺寸以确定其高度。

这些组件的可解析版本称为<leftresizable /> ， <rightresizable /> ， <topResizable />和<bottomerizizable /> ，可以通过用鼠标拖动从外边缘调整空间的大小。

其他

<填充 />

一个空间，该空间会考虑到每一侧的任何锚固空间，耗尽父容器/空间中剩余的任何可用区域。

<定位 />

一个可以绝对放置在父空间内的空间，既可以按顶部，左，宽度和高度，也可以由顶部，左，右和底部放置。

<layer />

层允许您在父空间内创建图层，例如：

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

<中心 />

水平和垂直的空间内容中心。

<centeredvertally />

将空间的内容垂直为中心。

入门

要开始使用React空间，您需要：

 npm install react - spaces -- save 

 import * as Spaces from "react-spaces" ;

在此处查看完整的文档。

捐款

如果您觉得这个库有用，请考虑进行小型捐款以资助一杯咖啡：