|
1 |
| -# React Spaces |
| 1 | +# Initial page |
2 | 2 |
|
3 |
| -  |
4 |
| - |
5 |
| -React Spaces allow you to divide a page or container HTML element into spaces. These spaces know how to behave in relation to each other and can also be divided into further nested spaces. |
6 |
| - |
7 |
| -View full documentation [here](https://www.allaneagle.com/react-spaces/demo/). |
8 |
| - |
9 |
| -<img src="https://www.allaneagle.com/react-spaces/react-spaces-demo.gif" width="100%" /> |
10 |
| - |
11 |
| -### Top level spaces |
12 |
| - |
13 |
| -Used at the top level of all other spaces. |
14 |
| - |
15 |
| -**\<ViewPort \/>** |
16 |
| - |
17 |
| -This space will take over the full viewport of the browser window. Resizing the browser window will automatically adjust the size of this space and all the nested spaces. |
18 |
| - |
19 |
| -**\<Fixed /\>** |
20 |
| - |
21 |
| -This space can be given a height and optionally a width (by default it will size to 100% of it's container). All nested spaces will be contained within this fixed size space. |
22 |
| - |
23 |
| -### Anchored spaces |
24 |
| - |
25 |
| -These can be used within the top-level spaces **\<ViewPort /\>** and **\<Fixed /\>** or nested within other spaces. |
26 |
| - |
27 |
| -**\<Left /\>** and **\<Right /\>** |
28 |
| - |
29 |
| -A space anchored to the left or right of the parent container/space. A size can be specified in pixels or as a percentage to determine its width. |
30 |
| - |
31 |
| -**\<Top /\>** and **\<Bottom /\>** |
32 |
| - |
33 |
| -A space anchored to the top or bottom of the parent container/space. A size can be specified in pixels or as a percentage to determine its height. |
34 |
| - |
35 |
| -There are resizable versions of these components called **\<LeftResizable /\>**, **\<RightResizable /\>**, **\<TopResizable /\>** and **\<BottomResizable /\>** which allow the spaces to be resized from the outer edge by dragging with the mouse. |
36 |
| - |
37 |
| -### Other |
38 |
| - |
39 |
| -**\<Fill /\>** |
40 |
| - |
41 |
| -A space which consumes any available area left in the parent container/space taking into account any anchored spaces on every side. |
42 |
| - |
43 |
| -**\<Layer /\>** |
44 |
| - |
45 |
| -Layers allow you to create layers within a parent space, for example: |
46 |
| - |
47 |
| -```html |
48 |
| -<ViewPort> |
49 |
| - |
50 |
| - <Layer zIndex={0}> |
51 |
| - <LeftResizable size="20%" /> // floating sidebar |
52 |
| - </Layer> |
53 |
| - |
54 |
| - <Layer zIndex={1}> |
55 |
| - <Fill /> |
56 |
| - </Layer> |
57 |
| - |
58 |
| -</ViewPort> |
59 |
| -``` |
60 |
| - |
61 |
| -**\<Centered /\>** |
62 |
| - |
63 |
| -Centres the content of a space horizontally and vertically. |
64 |
| - |
65 |
| -**\<CenteredVertically /\>** |
66 |
| - |
67 |
| -Centres the content of a space vertically. |
68 |
| - |
69 |
| -## Getting started |
70 |
| - |
71 |
| -To get started with React Spaces you need: |
72 |
| - |
73 |
| -```typescript |
74 |
| -npm install react-spaces --save |
75 |
| -``` |
76 |
| - |
77 |
| -```typescript |
78 |
| -import * as Spaces from 'react-spaces'; |
79 |
| -``` |
80 |
| - |
81 |
| -View full documentation [here](https://www.allaneagle.com/react-spaces/demo/). |
82 |
| - |
83 |
| -## Donation |
84 |
| -If you find this library useful, consider making a small donation to fund a cup of coffee: |
85 |
| - |
86 |
| -<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=AAYPWGUQBUDAA" |
87 |
| - title="If you find this library useful, consider making a small donation to fund a cup of coffee" alt="Make Donation" style="text-decoration: none;"> |
88 |
| - <img src="https://www.allaneagle.com/donation.png" /> |
89 |
| -</a> |
0 commit comments