react spaces

Реагировать пространства

Легкая для понимания и гнездовой системы макета, React Spaces позволяет вам разделить страницу или контейнер на якоренные, прокручиваемые и повторные используемые пространства, позволяющие создавать пользовательские интерфейсы рабочего стола/мобильного типа в браузере.

Вместо библиотеки визуальных компонентов пользовательского интерфейса, пространства предназначены для того, чтобы быть многократно используемыми основополагающими блоками для изготовления пользовательского интерфейса, который аккуратно реагирует на просмотр порта, оставляя вас, чтобы заполнить их любыми компонентами, которые вы хотите.

• Нет стиля для достижения простых или сложных макетов.
• Пространства знают, как вести себя по отношению друг к другу и соответственно изменить размер.
• Пространства не имеют для них визуального элемента (даже накладки или поля). Вы можете заполнить их тем, что хотите.

Версия 0.2.0 Выпуск - Читать заметки здесь.

Просмотреть полную документацию здесь.

Пространства верхнего уровня

Используется на верхнем уровне всех других мест.

<ViewPort />

Это пространство займет полный вид просмотра окна браузера. Изменение размера окна браузера автоматически отрегулирует размер этого пространства и все вложенные пространства.

<Фиксированный />

Это пространство может быть дана высота и, необязательно, ширина (по умолчанию оно будет размером до 100% его контейнера). Все вложенные пространства будут содержаться в этом пространстве с фиксированным размером.

Закрепленные пространства

Они могут использоваться в пределах пространства верхнего уровня <viewport /> и <фиксированный /> или вложенные в других пространствах.

<Слева /> и <справа />

Пространство, прикрепленное слева или справа от родительского контейнера/пространства. Размер может быть указан в пикселях или в процентах, чтобы определить его ширину.

<Top /> и <внизу />

Пространство, прикрепленное к вершине или дне родительского контейнера/пространства. Размер может быть указан в пикселях или в процентах, чтобы определить его высоту.

Существуют рецензируемые версии этих компонентов, называемых <leftresizable /> , <rightresizble /> , <topresizable /> и <bottomresizble /> , которые позволяют изменять размер пространств с внешнего края путем перетаскивания мышью.

Другой

<Fill />

Пространство, которое потребляет любую доступную область, оставленную в родительском контейнере/пространстве, с учетом любых якорных пространств со всех сторон.

<Позиционировать />

Пространство, которое может быть абсолютно размещено в родительском пространстве либо вверху, влево, шириной и высотой или сверху, слева, справа и снизу.

<Слой />

Слои позволяют создавать слои в родительском пространстве, например:

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

<Центр />

Сосредоточено содержание пространства по горизонтали и вертикально.

<CentralEdvertical />

Сосредоточено на содержании космической вертикали.

Начиная

Чтобы начать с React Spaces, вам нужно:

 npm install react - spaces -- save 

 import * as Spaces from "react-spaces" ;

Просмотреть полную документацию здесь.

Пожертвование

Если вы найдете эту библиотеку полезной, рассмотрите возможность сделать небольшое пожертвование, чтобы финансировать чашку кофе: