You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* Updated absolute layout
* Updated dock layout
* Added screenshot for dock layout
* WIP
* Updated flexbox
* Added note that alignitems and alignself are android-only
* Updated wrap layout
* Aligned phrasing
* Polishing PR
* Updated wording for template link to API
Right now, it's not applicable to layouts. Changed "and" to "or" in attempt to make it more correct.
* Fixed wording
* Fixed image issue, updated wording
* Fixing flexbox (wip)
* Updated wording and formatting for flexbox
* Added descriptions to examples
* Polished StackLayout
* Polished wording for WrapLayout
* fix typo
The AbsoluteLayout container is the simplest layout container in NativeScript. It uses absolute top-left coordinates to position its children. The AbsoluteLayout will not enforce any layout constraints on its children and will not resize them at runtime when its size changes.
7
+
The `<AbsoluteLayout>` container is the simplest layout container in NativeScript.
8
8
9
-
### Samples
9
+
`<AbsoluteLayout>` has the following behavior:
10
10
11
-
#### A grid-like layout
11
+
* Uses a pair of absolute left/top coordinates to position its children.
12
+
* Doesn't enforce any layout constraints on its children.
13
+
* Doesn't resize its children at runtime when its size changes.
14
+
15
+
## Examples
16
+
17
+
### A grid-like layout
18
+
19
+
The following example creates a simple grid. For more information about creating grid layouts, see [GridLayout](/en/docs/elements/layouts/grid-layout).
12
20
13
21
```html
14
22
<AbsoluteLayoutbackgroundColor="#3c495e">
@@ -20,7 +28,9 @@ The AbsoluteLayout container is the simplest layout container in NativeScript. I
DockLayout is a layout that provides a docking mechanism for child elements to the `left`, `right`, `top`, `bottom`or center of the layout. To define the docking side of a child element, use its `dock` property. To dock a child element to the center of the DockLayout, it must be the **last child** of the DockLayout and the `stretchLastChild` property of the DockLayout must be set to `true`.
7
+
`<DockLayout>` is a layout container that lets you dock child elements to the sides or the center of the layoyt.
8
8
9
-
### Samples
9
+
`<DockLayout>` has the following behavior:
10
10
11
-
#### Dock to every side without stretching last child
11
+
* Uses the `dock` property to dock its children to the `left`, `right`, `top`, `bottom` or center of the layout.<br/>To dock a child element to the center, it must be the **last child** of the container and you must set the `stretchLastChild` property of the parent to `true`.
12
+
* Enforces layout constraints to its children.
13
+
* Resizes its children at runtime when its size changes.
14
+
15
+
## Examples
16
+
17
+
### Dock to every side without stretching the last child
18
+
19
+
The following example creates a frame-like layout consisting of 4 elements, position at the 4 edges of the screen.
#### Dock to every side with stretching last child
31
+
### Dock to every side and stretch the last child
32
+
33
+
The following example shows how `stretchLastChild` affects the positioning of child elements in a `DockLayout` container. The last child (`bottom`) is stretched to take up all the remaining space after positioning the first three elements.
The FlexboxLayoutcontainer is a non-exact implementation of the [Css Flexbox Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
7
+
`<FlexboxLayout>` is a layout container that provides a non-exact implementation of the [CSS Flexbox layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox). This layout lets you arrange child components both horizontally and vertically.
8
8
9
-
### Samples
9
+
### Examples
10
10
11
11
#### Default flex layout
12
12
13
+
The following example creates a row of three equally-sized elements that span across the entire height of the screen.
#### Column flex layout with reverse order and items with a different `alignSelf`
78
+
79
+
The following example shows how to use:
80
+
81
+
*`flexDirection` to place items in a column, starting from the bottom.
82
+
*`justifyContent` to create equal spacing between the vertically placed items.
83
+
*`alignSelf` to modify the position of items across the main axis.
68
84
69
85
```html
70
86
<FlexboxLayoutflexDirection="column-reverse"
@@ -79,23 +95,22 @@ The FlexboxLayout container is a non-exact implementation of the [Css Flexbox La
79
95
80
96
## Props
81
97
82
-
|name|type|description|
98
+
|Name|Type|Description|
83
99
|------|------|-------------|
84
-
`flexDirection` | `String` | The direction in which flex items are placed in the flex container. The `flexDirection` property accepts 4 different values:`row` (same as text direction), `row-reverse` (opposite to text direction), `column` (same as row but top to bottom), and`column-reverse` (same as row-reverse top to bottom). The default value is`row`.
85
-
`flexWrap` | `String` | Sets whether the flex items are forced in a single line or can be flowed into multiple lines. If set to multiple lines, it also defines the cross-axis which determines the direction new lines are stacked in. The `flexWrap` property accepts 3 different values:`nowrap` (single-line which may cause the container to overflow),`wrap` (multi-lines, direction is defined by flexDirection), and`wrap-reverse` (multi-lines, opposite to direction defined by flexDirection). The default value is`nowrap`.
86
-
`justifyContent` | `String` | Sets the alignment along the main axis. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line. The justifyContent property accepts 5 different values:`flex-start` (items are packed toward the start line),`flex-end` (items are packed toward to end line),`center` (items are centered along the line),`space-between` (items are evenly distributed in the line; first item is on the start line, last item on the end line), and`space-around` (items are evenly distributed in the line with equal space around them). The default value is`flex-start`.
87
-
`alignItems` | `String` | Sets how flex items are laid out along the cross axis on the current line. You can think of it as the `justifyContent`version for the cross-axis (perpendicular to the main-axis). The `alignItems` property accepts 5 different values:`flex-start` (cross-start margin edge of the items is placed on the cross-start line),`flex-end` (cross-end margin edge of the items is placed on the cross-end line),`center` (items are centered in the cross-axis),`baseline` (items are aligned such as their baselines align), `stretch` (stretch to fill the container but still respect `min-width`/`max-width`). The default value is`stretch`.
88
-
`alignContent` | `String` | Sets how flex items are aligned in the flex container on the cross-axis, similar to how `justifyContent` aligns individual items within the main-axis. The `alignContent`property accepts 6 different values:`flex-start` (lines packed to the start of the container),`flex-end` (lines packed to the end of the container),`center` (lines packed to the center of the container),`space-between` (lines evenly distributed; the first line is at the start of the container while the last one is at the end),`space-around` (lines evenly distributed with equal space between them), and`stretch` (lines stretch to take up the remaining space). The default value is `stretch`. This property has no effect when the flex container has only a single line.
100
+
`flexDirection` | `String` | Sets the direction for placing child elements in the flexbox container.<br/>Valid values:<br/>`row` (horizontal, left to right),<br/>`row-reverse` (horizontal, right to left),<br/>`column` (vertical, top to bottom), and<br/>`column-reverse` (vertical, bottom to top).<br/>Default value:`row`.
101
+
`flexWrap` | `String` | Sets whether child elements are forced in a single line or can flow into multiple lines. If set to multiple lines, also defines the crossaxis which determines the direction new lines are stacked in.<br/>Valid values:<br/>`nowrap` (singleline which may cause the container to overflow),<br/>`wrap` (multiple lines, direction is defined by `flexDirection`),and<br/>`wrap-reverse` (multiple lines, opposite to the direction defined by `flexDirection`).<br/>Default value:`nowrap`.
102
+
`justifyContent` | `String` | Sets the alignment of child elements along the main axis. You can use it to distribute leftover space when all the child elements on a line are inflexible or are flexible but have reached their maximum size. You can also use it to control the alignment of items when they overflow the line.<br/>Valid values:<br/>`flex-start` (items are packed toward the start line),<br/>`flex-end` (items are packed toward the end line),<br/>`center` (items are centered along the line),<br/>`space-between` (items are evenly distributed on the line; first item is on the start line, last item on the end line), and<br/>`space-around` (items are evenly distributed on the line with equal space around them).<br/>Default value:`flex-start`.
103
+
`alignItems` | `String` | (Android-only) Sets the alignment of child elements along the cross axis on the current line. Acts as `justifyContent` for the crossaxis.<br/>Valid values:<br/>`flex-start` (cross-start margin edge of the items is placed on the cross-start line),<br/>`flex-end` (cross-end margin edge of the items is placed on the cross-end line),<br/>`center` (items are centered оn the crossaxis),<br/>`baseline` (the item baselines are aligned), and<br/>`stretch` (items are stretched to fill the container but respect `min-width` and `max-width`).<br/>Default value:`stretch`.
104
+
`alignContent` | `String` | Sets how lines are aligned in the flex container on the crossaxis, similar to how `justifyContent` aligns individual items within the mainaxis.<br/> This property has no effect when the flex container has only one line.<br/>Valid values:<br/>`flex-start` (lines are packed to the start of the container),<br/>`flex-end` (lines are packed to the end of the container),<br/>`center` (lines are packed to the center of the container),<br/>`space-between` (lines are evenly distributed; the first line is at the start of the container while the last one is at the end),<br/>`space-around` (lines are evenly distributed with equal space between them), and<br/>`stretch` (lines are stretched to take up the remaining space).<br/>Default value: `stretch`.
89
105
90
-
## Additional Children Props
106
+
## Additional children props
91
107
92
-
When an element is a direct child of the FlexboxLayout, the following
93
-
props get a meaning:
108
+
When an element is a direct child of `<FlexboxLayout>`, you can work with the following additional properties.
94
109
95
-
|name|type|description|
110
+
|Name|Type|Description|
96
111
|------|------|-------------|
97
-
`order` | `Number` | Changes the default ordering of the flex items
98
-
`flexGrow` | `Number` | Unitless value that serves as a proportion indicating whether the flex item is able to grow if necessary. It dictates what amount of the available space inside the flex container the item should take up.
99
-
`flexShrink` | `Number` | A value indicating the "flex shrink factor", which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there is not enough space on the row. When omitted, it is set to 1 and the flex shrink factor is multiplied by the flex basis when distributing negative space.
100
-
`alignSelf` | `String` | A value that overrides the `alignItems` value for specific flex items. This property accepts the same 5 values as `alignItems`: `flex-start` (cross-start margin edge of the item is placed on the cross-start line),`flex-end` (cross-end margin edge of the item is placed on the cross-end line),`center` (item is centered in the cross-axis),`baseline` (items are aligned such as their baselines are aligned), and`stretch` (stretch to fill the container but still respect `min-width`/`max-width`). The default value is`stretch`.
101
-
`flexWrapBefore` | `Boolean` | A boolean value controlling item wrapping. Setting it to `true` will force the item to wrap onto a new line. The default value is `false`. (This property is not part of the official flexbox specification.)
112
+
`order` | `Number` | Sets the order in which child element appear in relation to one another.
113
+
`flexGrow` | `Number` | Indicates that the child should grow in size, if necessary. Sets how much the child will grow in proportion to the rest of the child elements in the flex container.
114
+
`flexShrink` | `Number` | Indicates that the child should shrink when the row runs out of space. Sets how much the flex item will shrink in proportion to the rest of the child elements in the flex container. When not specified, its value is set to `1`.
115
+
`alignSelf` | `String` | (Android-only) Overrides the `alignItems` value for the child.<br/>Valid values:<br/>`flex-start` (cross-start margin edge of the item is placed on the cross-start line),<br/>`flex-end` (cross-end margin edge of the item is placed on the cross-end line),<br/>`center` (item is centered on the crossaxis),<br/>`baseline` (the item baselines are aligned), and<br/>`stretch` (items is stretched to fill the container but respects `min-width` and `max-width`).<br/>Default value:`stretch`.
116
+
`flexWrapBefore` | `Boolean` | When `true`, forces the item to wrap onto a new line. This property is not part of the official Flexbox specification.<br/>Default value: `false`.
0 commit comments