Skip to content

Commit f533359

Browse files
aeaglegitbook-bot
authored andcommitted
GitBook: [master] 2 pages modified
1 parent 909395c commit f533359

File tree

2 files changed

+5
-88
lines changed

2 files changed

+5
-88
lines changed

README.md

Lines changed: 1 addition & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,2 @@
1-
# React Spaces
1+
# Initial page
22

3-
![NPM](https://img.shields.io/npm/v/react-spaces.svg) ![Azure Pipelines](https://allan-eagle.visualstudio.com/All%20projects/_apis/build/status/React-Spaces%20publish)
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>

SUMMARY.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# Table of contents
2+
3+
* [Initial page](README.md)
4+

0 commit comments

Comments
 (0)