react spaces

반응 공간

이해하기 쉽고 중첩 가능한 레이아웃 시스템 인 React Spacace를 사용하면 페이지 나 컨테이너를 고정, 스크롤 가능 및 방지 가능한 공간으로 나눌 수있어 브라우저에 데스크탑/모바일 유형의 사용자 인터페이스를 구축 할 수 있습니다.

시각적 UI 구성 요소의 라이브러리 대신 공간은 UI를 배치하기위한 재사용 가능한 기초 블록이되기위한 것입니다. UI를 깔끔하게 응답하여 포트 크기가 원하는 구성 요소로 채우도록 깔끔하게 응답합니다.

• 간단하거나 복잡한 레이아웃을 달성하기위한 스타일이 없습니다.
• 공백은 서로 관련하여 행동하는 방법을 알고 그에 따라 크기를 조정합니다.
• 공간에는 시각적 요소가 없습니다 (패딩이나 여백조차도). 원하는대로 채울 수 있습니다.

버전 0.2.0 릴리스 - 여기에서 릴리스 노트를 읽으십시오.

여기에서 전체 문서를보십시오.

최상위 공간

다른 모든 공간의 최상위 수준에서 사용됩니다.

<Viewport />

이 공간은 브라우저 창의 전체 뷰포트를 인수합니다. 브라우저 창 크기를 조정하면이 공간의 크기와 모든 중첩 된 공간의 크기가 자동으로 조정됩니다.

<고정 />

이 공간은 높이와 선택적으로 너비가 주어질 수 있습니다 (기본적으로 컨테이너의 100%로 크기가 크게). 중첩 된 모든 공간은이 고정 크기 공간 내에 포함됩니다.

고정 된 공간

이들은 최상위 공간 <viewport /> 및 <고정 /> 내에서 사용될 수 있거나 다른 공간 내에 중첩 될 수 있습니다.

<왼쪽 /> 및 <오른쪽 />

상위 용기/공간의 왼쪽 또는 오른쪽에 고정 된 공간. 크기는 폭을 결정하기 위해 픽셀 또는 백분율로 지정할 수 있습니다.

<상단 /> 및 <하단 />

상위 용기/공간의 상단 또는 하단에 고정 된 공간. 크기는 픽셀로 또는 높이를 결정하기 위해 백분율로 지정할 수 있습니다.

<leftresizable /> , <rightresizable /> , <topresizable /> 및 <bottomresizable /> 이라는 이들 성분의 수정 가능한 버전이있다.

다른

<fill />

모든 측면의 고정 된 공간을 고려하여 부모 컨테이너/공간에 남은 모든 공간을 소비하는 공간.

<위치 />

상단, 왼쪽, 너비 및 높이 또는 상단, 왼쪽, 오른쪽 및 하단으로 부모 공간 내에 절대적으로 배치 될 수있는 공간.

<레이어 />

레이어는 부모 공간 내에서 레이어를 만들 수 있습니다.

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

<중심 />

공간의 내용을 수평 및 수직으로 중심으로합니다.

<중심 적으로 />

공간의 내용을 수직으로 중심으로합니다.

시작하기

필요한 React 공간을 시작하려면 다음과 같습니다.

 npm install react - spaces -- save 

 import * as Spaces from "react-spaces" ;

여기에서 전체 문서를보십시오.

기부

이 라이브러리가 유용하다고 생각되면 커피 한 잔에 자금을 지원하기 위해 작은 기부를하는 것을 고려하십시오.