Skip to content

Commit 5bf2894

Browse files
committed
Added layout docs
1 parent d71a2b4 commit 5bf2894

File tree

7 files changed

+114
-8
lines changed

7 files changed

+114
-8
lines changed
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,21 @@
11
---
22
title: AbsoluteLayout
3+
apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_absolute_layout_
34
---
45

5-
TODO
6+
The AbsoluteLayout container lets you specify exact coordinates (top/left) of elements.
7+
8+
## Props
9+
10+
The AbsoluteLayout has no additional props.
11+
12+
## Additional Children Props
13+
14+
When an element is a direct child of the AbsoluteLayout, the following
15+
props get a meaning:
16+
17+
| name | type | description |
18+
|------|------|-------------|
19+
| `top` | `Number` | A value representing the distance from the top of the parent AbsoluteLayout
20+
| `left` | `Number` | A value representing the distance from the left of the parent AbsoluteLayout
21+
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,21 @@
11
---
22
title: DockLayout
3+
apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_dock_layout_
34
---
45

5-
TODO
6+
The DockLayout container arranges it's children on it's outer edges, and allows the **last children** to take up the remaining space.
7+
8+
## Props
9+
10+
| name | type | description |
11+
|------|------|-------------|
12+
`stretchLastChild` | `Boolean` | Enables/Disables stretching the last child to fit the remaining space.
13+
14+
## Additional Children Props
15+
16+
When an element is a direct child of the DockLayout, the following
17+
props get a meaning:
18+
19+
| name | type | description |
20+
|------|------|-------------|
21+
`dock` | `String` | Specifies which side to dock the element to. Values can be: `top`, `right`, `bottom`, `left`
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,32 @@
11
---
22
title: FlexboxLayout
3+
apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_flexbox_layout_
34
---
45

5-
TODO
6+
The FlexboxLayout container is a non-exact implementation of the [Css Flexbox Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
7+
8+
## Props
9+
10+
| name | type | description |
11+
|------|------|-------------|
12+
`flexDirection` | `String` | Specifies the direction of the Flex layout
13+
`flexWrap` | `String` | Specifies how to wrap child elements
14+
`justifyContent` | `String` | Specifies how to justify content
15+
`alignItems` | `String` | Specifies how to align items
16+
`alignContent` | `String` | Specifies how to align content
17+
18+
## Additional Children Props
19+
20+
When an element is a direct child of the FlexboxLayout, the following
21+
props get a meaning:
22+
23+
| name | type | description |
24+
|------|------|-------------|
25+
`order` | `Number` | Specifies the order of the element
26+
`flexGrow` | `Number` | Specifies if the element can grow in size
27+
`flexShrink` | `Number` | Specifies if the element can shrink in size
28+
`alignSelf` | `String` | Specifies the alignment of the element
29+
`flexWrapBefore` | `Boolean` | Specifies if the element should be force to a new line
30+
31+
32+
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,26 @@
11
---
22
title: GridLayout
3+
apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_grid_layout_
34
---
45

5-
TODO
6+
The GridLayout container lets you define a grid of columns and rows, and position child element on this grid.
7+
8+
## Props
9+
10+
| name | type | description |
11+
|------|------|-------------|
12+
`columns` | `String` | Specifies the columns schema for the grid
13+
`rows` | `String` | Specifies the rows schema for the grid
14+
15+
16+
## Additional Children Props
17+
18+
When an element is a direct child of the GridLayout, the following
19+
props get a meaning:
20+
21+
| name | type | description |
22+
|------|------|-------------|
23+
`row` | `Number` | Specifies the row which this element should be in
24+
`column` | `Number` | Specifies the column which this element should be in
25+
`rowSpan` | `Number` | Specifies the number of rows which this element should span across
26+
`columnSpan` | `Number` | Specifies the number of columns which this element should span across
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
---
22
title: StackLayout
3+
apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_stack_layout_
34
---
45

5-
TODO
6+
The StackLayout container stacks the child elements either vertically (default), or horizontally.
7+
8+
## Props
9+
10+
| name | type | description |
11+
|------|------|-------------|
12+
`orientation` | `String` | Specifies the direction of the stacking.
13+
14+
15+
## Additional Children Props
16+
17+
There are no additional properties for child elements.
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,19 @@
11
---
22
title: WrapLayout
3+
apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_wrap_layout_
34
---
45

5-
TODO
6+
The WrapLayout container positions its children in rows or columns, based on the orientation property, until the space is filled and then wraps them on a new row or column.
7+
8+
## Props
9+
10+
| name | type | description |
11+
|------|------|-------------|
12+
`orientation` | `String` | Specifies the orientation of the layout.
13+
`itemWidth` | `String` | Specifies the width of the items
14+
`itemHeight` | `String` | Specifies the height of the items
15+
16+
17+
## Additional Children Props
18+
19+
There are no additional properties for child elements.

package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
"build:js": "babel src -d static"
1111
},
1212
"keywords": [],
13-
"author": "",
14-
"license": "ISC",
13+
"author": "Igor Randjelovic",
14+
"license": "MIT",
1515
"devDependencies": {
1616
"babel-cli": "^6.26.0",
1717
"babel-preset-env": "^1.6.1",

0 commit comments

Comments
 (0)