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" ;

在此處查看完整的文檔。

捐款

如果您覺得這個庫有用，請考慮進行小型捐款以資助一杯咖啡：