From f1e88dab000a541695946705aaee4f12e1f0d1ca Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Mon, 25 Jun 2018 14:10:44 +0300 Subject: [PATCH 01/18] Updated absolute layout --- .../en/elements/layouts/absolute-layout.md | 29 +++++++++++-------- 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/content/docs/en/elements/layouts/absolute-layout.md b/content/docs/en/elements/layouts/absolute-layout.md index 941998f2..16ef30b3 100644 --- a/content/docs/en/elements/layouts/absolute-layout.md +++ b/content/docs/en/elements/layouts/absolute-layout.md @@ -1,14 +1,20 @@ --- title: AbsoluteLayout apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_absolute_layout_ -contributors: [rigor789] +contributors: [rigor789, ikoevska] --- -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. +The `` container is the simplest layout container in NativeScript. -### Samples +`` has the following behavior: -#### A grid-like layout +* Uses a pair of absolute left/top coordinates to position its children. +* Doesn't enforce any layout constraints on its children. +* Doesn't resize children at runtime when its size changes. + +## Samples + +### A grid-like layout ```html @@ -20,7 +26,7 @@ The AbsoluteLayout container is the simplest layout container in NativeScript. I ```

-#### Overlapping elements +### Overlapping elements ```html @@ -33,14 +39,13 @@ The AbsoluteLayout container is the simplest layout container in NativeScript. I ## Props -AbsoluteLayout has no props. +`` has no props. -## Additional Children Props +## Additional children props -When an element is a direct child of the AbsoluteLayout, the following -props get a meaning: +The following props are available for elements that are direct children of an ``. -| name | type | description | +| Name | Type | Description | |------|------|-------------| -| `top` | `Number` | A value representing the distance from the top of the parent AbsoluteLayout -| `left` | `Number` | A value representing the distance from the left of the parent AbsoluteLayout +| `top` | `Number` | Gets or sets the distance, in pixels, between the top edge of the child and the top edge of its parent `` client area. +| `left` | `Number` | Gets or sets the distance, in pixels, between the left edge of the child and the left edge of its parent `` client area. \ No newline at end of file From 89fe7df97fd59e2254d3405471f872650896e43b Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Mon, 25 Jun 2018 14:26:43 +0300 Subject: [PATCH 02/18] Updated dock layout --- .../en/elements/layouts/absolute-layout.md | 2 +- .../docs/en/elements/layouts/dock-layout.md | 43 +++++++++++++------ 2 files changed, 31 insertions(+), 14 deletions(-) diff --git a/content/docs/en/elements/layouts/absolute-layout.md b/content/docs/en/elements/layouts/absolute-layout.md index 16ef30b3..c24f5be7 100644 --- a/content/docs/en/elements/layouts/absolute-layout.md +++ b/content/docs/en/elements/layouts/absolute-layout.md @@ -10,7 +10,7 @@ The `` container is the simplest layout container in NativeScrip * Uses a pair of absolute left/top coordinates to position its children. * Doesn't enforce any layout constraints on its children. -* Doesn't resize children at runtime when its size changes. +* Doesn't resize its children at runtime when its size changes. ## Samples diff --git a/content/docs/en/elements/layouts/dock-layout.md b/content/docs/en/elements/layouts/dock-layout.md index 07f6c943..e3579674 100644 --- a/content/docs/en/elements/layouts/dock-layout.md +++ b/content/docs/en/elements/layouts/dock-layout.md @@ -1,14 +1,20 @@ --- title: DockLayout apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_dock_layout_ -contributors: [rigor789] +contributors: [rigor789, ikoevska] --- -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`. +`` is a layout container that provides a docking mechanism for child elements to the sides or the center of the layoyt. -### Samples +`` has the following behavior: -#### Dock to every side without stretching last child +* Uses the `dock` property to dock its children to the `left`, `right`, `top`, `bottom` or center of the layout.
To dock a child element to the center, it must be the **last child** of the container and the `stretchLastChild` property of the parent must be set to `true`. +* Enforces layout constraints to its children. +* Resizes its children at runtime when its size changes. + +## Samples + +### Dock to every side without stretching last child ```html @@ -20,7 +26,7 @@ DockLayout is a layout that provides a docking mechanism for child elements to t ```

-#### Dock to every side with stretching last child +### Dock to every side with stretching last child ```html @@ -32,7 +38,19 @@ DockLayout is a layout that provides a docking mechanism for child elements to t ```

-#### Multiple children on the same side +### Dock to every side and the center + +```html + + + + + + + +``` + +### Multiple children on the same side ```html @@ -46,15 +64,14 @@ DockLayout is a layout that provides a docking mechanism for child elements to t ## Props -| name | type | description | +| Name | Type | Description | |------|------|-------------| -`stretchLastChild` | `Boolean` | Enables/Disables stretching the last child to fit the remaining space. +| `stretchLastChild` | `Boolean` | Enables or disables stretching the last child to fit the remaining space. -## Additional Children Props +## Additional children props -When an element is a direct child of the DockLayout, the following -props get a meaning: +The following props are available for elements that are direct children of a ``. -| name | type | description | +| Name | Type | Description | |------|------|-------------| -`dock` | `String` | Specifies which side to dock the element to. Values can be: `top`, `right`, `bottom`, `left` +| `dock` | `String` | Specifies which side to dock the element to.
Valid values: `top`, `right`, `bottom`, or `left`. From ab3b1ea6e6d7cdbe78dc4a3d1b61592a5ef0a4a9 Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Mon, 23 Jul 2018 13:39:44 +0300 Subject: [PATCH 03/18] Added screenshot for dock layout --- content/docs/en/elements/layouts/dock-layout.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/docs/en/elements/layouts/dock-layout.md b/content/docs/en/elements/layouts/dock-layout.md index e3579674..773e303d 100644 --- a/content/docs/en/elements/layouts/dock-layout.md +++ b/content/docs/en/elements/layouts/dock-layout.md @@ -49,6 +49,7 @@ contributors: [rigor789, ikoevska] ``` + ### Multiple children on the same side From 0c579a15277050dd66f964f4a663d7953fd13e35 Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Mon, 23 Jul 2018 14:26:36 +0300 Subject: [PATCH 04/18] WIP --- .../en/elements/layouts/flexbox-layout.md | 33 ++++++++++--------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/content/docs/en/elements/layouts/flexbox-layout.md b/content/docs/en/elements/layouts/flexbox-layout.md index 24b7e249..7ce77c18 100644 --- a/content/docs/en/elements/layouts/flexbox-layout.md +++ b/content/docs/en/elements/layouts/flexbox-layout.md @@ -1,10 +1,10 @@ --- title: FlexboxLayout apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_flexbox_layout_ -contributors: [rigor789] +contributors: [rigor789, ikoevska] --- -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) +`` is 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. ### Samples @@ -30,7 +30,7 @@ The FlexboxLayout container is a non-exact implementation of the [Css Flexbox La ```

-#### Row layout with items aligned to flex-start +#### Row layout with items aligned to `flex-start` ```html @@ -64,7 +64,7 @@ The FlexboxLayout container is a non-exact implementation of the [Css Flexbox La ```

-#### Reverse column, with different alignSelf +#### Reverse column, with different `alignSelf` ```html Valid 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` but top to bottom).
Default value: `row`. +`flexWrap` | `String` | Sets whether child items are forced in a single line or can flow into multiple lines. If set to multiple lines, also defines the cross axis which determines the direction new lines are stacked in.
Valid 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`).
Default value: `nowrap`. +`justifyContent` | `String` | Sets the alignment of child items along the main axis. You can use it to distribute leftover free space when all the child items on a line are inflexible or are flexible but have reached their maximum size. You can also use it to exert some control over the alignment of items when they overflow the line.
Valid values: `flex-start` (items are packed toward the start line), `flex-end` (items are packed toward the end line), `center` (items are centered along the line), `space-between` (items are evenly distributed on the line; first item is on the start line, last item on the end line), and `space-around` (items are evenly distributed on the line with equal space around them).
Default value: `flex-start`. +`alignItems` | `String` | Sets the alignment of child items along the cross axis on the current line. Acts as `justifyContent` but for the cross axis.
Valid 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 respect `min-width` and `max-width`).
Default value: `stretch`. +`alignContent` | `String` | Sets how lines are aligned in the flex container on the cross axis, similar to how `justifyContent` aligns individual items within the main axis.
This property has no effect when the flex container has only one line.
Valid values: `flex-start` (lines are packed to the start of the container), `flex-end` (lines are packed to the end of the container), `center` (lines are packed to the center of the container), `space-between` (lines are evenly distributed; the first line is at the start of the container while the last one is at the end), `space-around` (lines are evenly distributed with equal space between them), and `stretch` (lines are stretched to take up the remaining space).
Default value: `stretch`. -## Additional Children Props +## Additional children props -When an element is a direct child of the FlexboxLayout, the following -props get a meaning: +The following props are available for elements that are direct children of a ``. -| name | type | description | +| Name | Type | Description | |------|------|-------------| -`order` | `Number` | Changes the default ordering of the flex items +`order` | `Number` | Changes the default ordering of the child items. + + +>>>> TO DO <<<<< + `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. `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. `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`. From 5196ff83b3ed1bcceef4e525dbbe2b786ced53d3 Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Thu, 26 Jul 2018 13:43:51 +0300 Subject: [PATCH 05/18] Updated flexbox --- .../docs/en/elements/layouts/flexbox-layout.md | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/content/docs/en/elements/layouts/flexbox-layout.md b/content/docs/en/elements/layouts/flexbox-layout.md index 7ce77c18..ad42246f 100644 --- a/content/docs/en/elements/layouts/flexbox-layout.md +++ b/content/docs/en/elements/layouts/flexbox-layout.md @@ -84,7 +84,7 @@ contributors: [rigor789, ikoevska] `flexDirection` | `String` | Sets the direction for placing child items in the flexbox container.
Valid 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` but top to bottom).
Default value: `row`. `flexWrap` | `String` | Sets whether child items are forced in a single line or can flow into multiple lines. If set to multiple lines, also defines the cross axis which determines the direction new lines are stacked in.
Valid 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`).
Default value: `nowrap`. `justifyContent` | `String` | Sets the alignment of child items along the main axis. You can use it to distribute leftover free space when all the child items on a line are inflexible or are flexible but have reached their maximum size. You can also use it to exert some control over the alignment of items when they overflow the line.
Valid values: `flex-start` (items are packed toward the start line), `flex-end` (items are packed toward the end line), `center` (items are centered along the line), `space-between` (items are evenly distributed on the line; first item is on the start line, last item on the end line), and `space-around` (items are evenly distributed on the line with equal space around them).
Default value: `flex-start`. -`alignItems` | `String` | Sets the alignment of child items along the cross axis on the current line. Acts as `justifyContent` but for the cross axis.
Valid 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 respect `min-width` and `max-width`).
Default value: `stretch`. +`alignItems` | `String` | Sets the alignment of child items along the cross axis on the current line. Acts as `justifyContent` but for the cross axis.
Valid 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` (the item baselines are aligned), `stretch` (stretch to fill the container but respect `min-width` and `max-width`).
Default value: `stretch`. `alignContent` | `String` | Sets how lines are aligned in the flex container on the cross axis, similar to how `justifyContent` aligns individual items within the main axis.
This property has no effect when the flex container has only one line.
Valid values: `flex-start` (lines are packed to the start of the container), `flex-end` (lines are packed to the end of the container), `center` (lines are packed to the center of the container), `space-between` (lines are evenly distributed; the first line is at the start of the container while the last one is at the end), `space-around` (lines are evenly distributed with equal space between them), and `stretch` (lines are stretched to take up the remaining space).
Default value: `stretch`. ## Additional children props @@ -93,12 +93,8 @@ The following props are available for elements that are direct children of a `>>> TO DO <<<<< - -`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. -`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. -`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`. -`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.) +`order` | `Number` | Sets the order in which the child item appears in relation to the remaining child items. +`flexGrow` | `Number` | Indicates that the child item should grow in size, if necessary. Sets how much the child item will grow relative to the rest of the child items in the flex container. +`flexShrink` | `Number` | Indicates that the child item should shrink when the row runs out of space. Sets how much the flex item will shrink relative to the rest of the child items in the flex container. When not specified, its value is set to 1. +`alignSelf` | `String` | Overrides the `alignItems` value for the child item.
Valid values: `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 on the cross axis), `baseline` (the item baselines are aligned), and `stretch` (stretch to fill the container but respect `min-width` and `max-width`).
Default value: `stretch`. +`flexWrapBefore` | `Boolean` | When `true`, forces the item to wrap onto a new line. This property is not part of the official Flexbox specification.
Default value: `false`. \ No newline at end of file From 1f70bb2a6fa480e24aedea7fc08b95aca0c6754c Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Thu, 26 Jul 2018 13:46:34 +0300 Subject: [PATCH 06/18] Added note that alignitems and alignself are android-only --- content/docs/en/elements/layouts/flexbox-layout.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/en/elements/layouts/flexbox-layout.md b/content/docs/en/elements/layouts/flexbox-layout.md index ad42246f..bb1383a1 100644 --- a/content/docs/en/elements/layouts/flexbox-layout.md +++ b/content/docs/en/elements/layouts/flexbox-layout.md @@ -84,7 +84,7 @@ contributors: [rigor789, ikoevska] `flexDirection` | `String` | Sets the direction for placing child items in the flexbox container.
Valid 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` but top to bottom).
Default value: `row`. `flexWrap` | `String` | Sets whether child items are forced in a single line or can flow into multiple lines. If set to multiple lines, also defines the cross axis which determines the direction new lines are stacked in.
Valid 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`).
Default value: `nowrap`. `justifyContent` | `String` | Sets the alignment of child items along the main axis. You can use it to distribute leftover free space when all the child items on a line are inflexible or are flexible but have reached their maximum size. You can also use it to exert some control over the alignment of items when they overflow the line.
Valid values: `flex-start` (items are packed toward the start line), `flex-end` (items are packed toward the end line), `center` (items are centered along the line), `space-between` (items are evenly distributed on the line; first item is on the start line, last item on the end line), and `space-around` (items are evenly distributed on the line with equal space around them).
Default value: `flex-start`. -`alignItems` | `String` | Sets the alignment of child items along the cross axis on the current line. Acts as `justifyContent` but for the cross axis.
Valid 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` (the item baselines are aligned), `stretch` (stretch to fill the container but respect `min-width` and `max-width`).
Default value: `stretch`. +`alignItems` | `String` | (Android-only) Sets the alignment of child items along the cross axis on the current line. Acts as `justifyContent` but for the cross axis.
Valid 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` (the item baselines are aligned), `stretch` (stretch to fill the container but respect `min-width` and `max-width`).
Default value: `stretch`. `alignContent` | `String` | Sets how lines are aligned in the flex container on the cross axis, similar to how `justifyContent` aligns individual items within the main axis.
This property has no effect when the flex container has only one line.
Valid values: `flex-start` (lines are packed to the start of the container), `flex-end` (lines are packed to the end of the container), `center` (lines are packed to the center of the container), `space-between` (lines are evenly distributed; the first line is at the start of the container while the last one is at the end), `space-around` (lines are evenly distributed with equal space between them), and `stretch` (lines are stretched to take up the remaining space).
Default value: `stretch`. ## Additional children props @@ -96,5 +96,5 @@ The following props are available for elements that are direct children of a `Valid values: `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 on the cross axis), `baseline` (the item baselines are aligned), and `stretch` (stretch to fill the container but respect `min-width` and `max-width`).
Default value: `stretch`. +`alignSelf` | `String` | (Android-only) Overrides the `alignItems` value for the child item.
Valid values: `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 on the cross axis), `baseline` (the item baselines are aligned), and `stretch` (stretch to fill the container but respect `min-width` and `max-width`).
Default value: `stretch`. `flexWrapBefore` | `Boolean` | When `true`, forces the item to wrap onto a new line. This property is not part of the official Flexbox specification.
Default value: `false`. \ No newline at end of file From 51bd20012623617b710ea6a2fbbe1a52b4fd3fdd Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Thu, 26 Jul 2018 14:08:43 +0300 Subject: [PATCH 07/18] Updated wrap layout --- .../docs/en/elements/layouts/wrap-layout.md | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/content/docs/en/elements/layouts/wrap-layout.md b/content/docs/en/elements/layouts/wrap-layout.md index 6fc1f163..a672556f 100644 --- a/content/docs/en/elements/layouts/wrap-layout.md +++ b/content/docs/en/elements/layouts/wrap-layout.md @@ -1,14 +1,14 @@ --- title: WrapLayout apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_wrap_layout_ -contributors: [rigor789] +contributors: [rigor789, ikoevska] --- -The WrapLayout container positions its children in rows or columns, based on the orientation property, until the space is filled and then wraps them onto a new row or column. +`` is a layout container that lets you position items in rows or columns, based on the `orientation` property. When the space is filled, the container automatically wraps items onto a new row or column. ### Samples -#### Default WrapLayout +#### Default wrap layout ```html @@ -20,7 +20,7 @@ The WrapLayout container positions its children in rows or columns, based on the ```

-#### Vertical WrapLayout +#### Vertical wrap layout ```html @@ -34,13 +34,12 @@ The WrapLayout container positions its children in rows or columns, based on the ## Props -| name | type | description | +| Name | Type | Description | |------|------|-------------| -`orientation` | `String` | A value indicating the flow direction. If orientation is `horizontal`, items are arranged in rows. If orientation is `vertical`, items are arranged in columns. The default value is `horizontal`. -`itemWidth` | `Number` | The width used to measure and layout each child. Default value is `Number.NaN`, which does not restrict children. -`itemHeight` | `Number` | The height used to measure and layout each child. Default value is `Number.NaN`, which does not restrict children. +`orientation` | `String` | Indicates whether items are position in rows or columns.
Valid values: `horizontal` (arranges items in rows) and `vertical` (arranges items in columns).
Default value: `horizontal`. +`itemWidth` | `Number` | Sets the width used to measure and layout each child.
Default value: `Number.NaN`, which does not restrict children. +`itemHeight` | `Number` | Sets the height used to measure and layout each child.
Default value is `Number.NaN`, which does not restrict children. +## Additional children props -## Additional Children Props - -There are no additional properties for child elements. +None. \ No newline at end of file From 5f275fcdf1da39538516d74db52834498f732cbd Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Thu, 26 Jul 2018 14:08:51 +0300 Subject: [PATCH 08/18] Aligned phrasing --- .../en/elements/layouts/absolute-layout.md | 5 ++--- .../docs/en/elements/layouts/dock-layout.md | 4 ++-- .../en/elements/layouts/flexbox-layout.md | 22 +++++++++---------- .../docs/en/elements/layouts/grid-layout.md | 22 +++++++++---------- .../docs/en/elements/layouts/stack-layout.md | 20 ++++++++--------- 5 files changed, 36 insertions(+), 37 deletions(-) diff --git a/content/docs/en/elements/layouts/absolute-layout.md b/content/docs/en/elements/layouts/absolute-layout.md index c24f5be7..a61ac258 100644 --- a/content/docs/en/elements/layouts/absolute-layout.md +++ b/content/docs/en/elements/layouts/absolute-layout.md @@ -12,7 +12,7 @@ The `` container is the simplest layout container in NativeScrip * Doesn't enforce any layout constraints on its children. * Doesn't resize its children at runtime when its size changes. -## Samples +## Examples ### A grid-like layout @@ -36,14 +36,13 @@ The `` container is the simplest layout container in NativeScrip ```

- ## Props `` has no props. ## Additional children props -The following props are available for elements that are direct children of an ``. +When an element is a direct child of ``, you can work with the following additional properties. | Name | Type | Description | |------|------|-------------| diff --git a/content/docs/en/elements/layouts/dock-layout.md b/content/docs/en/elements/layouts/dock-layout.md index 773e303d..23ac50ce 100644 --- a/content/docs/en/elements/layouts/dock-layout.md +++ b/content/docs/en/elements/layouts/dock-layout.md @@ -12,7 +12,7 @@ contributors: [rigor789, ikoevska] * Enforces layout constraints to its children. * Resizes its children at runtime when its size changes. -## Samples +## Examples ### Dock to every side without stretching last child @@ -71,7 +71,7 @@ contributors: [rigor789, ikoevska] ## Additional children props -The following props are available for elements that are direct children of a ``. +When an element is a direct child of ``, you can work with the following additional properties. | Name | Type | Description | |------|------|-------------| diff --git a/content/docs/en/elements/layouts/flexbox-layout.md b/content/docs/en/elements/layouts/flexbox-layout.md index bb1383a1..5b08d8b5 100644 --- a/content/docs/en/elements/layouts/flexbox-layout.md +++ b/content/docs/en/elements/layouts/flexbox-layout.md @@ -4,9 +4,9 @@ apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_flexbox_ contributors: [rigor789, ikoevska] --- -`` is 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. +`` 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. -### Samples +### Examples #### Default flex layout @@ -81,20 +81,20 @@ contributors: [rigor789, ikoevska] | Name | Type | Description | |------|------|-------------| -`flexDirection` | `String` | Sets the direction for placing child items in the flexbox container.
Valid 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` but top to bottom).
Default value: `row`. -`flexWrap` | `String` | Sets whether child items are forced in a single line or can flow into multiple lines. If set to multiple lines, also defines the cross axis which determines the direction new lines are stacked in.
Valid 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`).
Default value: `nowrap`. -`justifyContent` | `String` | Sets the alignment of child items along the main axis. You can use it to distribute leftover free space when all the child items on a line are inflexible or are flexible but have reached their maximum size. You can also use it to exert some control over the alignment of items when they overflow the line.
Valid values: `flex-start` (items are packed toward the start line), `flex-end` (items are packed toward the end line), `center` (items are centered along the line), `space-between` (items are evenly distributed on the line; first item is on the start line, last item on the end line), and `space-around` (items are evenly distributed on the line with equal space around them).
Default value: `flex-start`. -`alignItems` | `String` | (Android-only) Sets the alignment of child items along the cross axis on the current line. Acts as `justifyContent` but for the cross axis.
Valid 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` (the item baselines are aligned), `stretch` (stretch to fill the container but respect `min-width` and `max-width`).
Default value: `stretch`. +`flexDirection` | `String` | Sets the direction for placing child elements in the flexbox container.
Valid 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` but top to bottom).
Default value: `row`. +`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 cross axis which determines the direction new lines are stacked in.
Valid 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`).
Default value: `nowrap`. +`justifyContent` | `String` | Sets the alignment of child elements along the main axis. You can use it to distribute leftover free 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 exert some control over the alignment of items when they overflow the line.
Valid values: `flex-start` (items are packed toward the start line), `flex-end` (items are packed toward the end line), `center` (items are centered along the line), `space-between` (items are evenly distributed on the line; first item is on the start line, last item on the end line), and `space-around` (items are evenly distributed on the line with equal space around them).
Default value: `flex-start`. +`alignItems` | `String` | (Android-only) Sets the alignment of child elements along the cross axis on the current line. Acts as `justifyContent` but for the cross axis.
Valid 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` (the item baselines are aligned), `stretch` (stretch to fill the container but respect `min-width` and `max-width`).
Default value: `stretch`. `alignContent` | `String` | Sets how lines are aligned in the flex container on the cross axis, similar to how `justifyContent` aligns individual items within the main axis.
This property has no effect when the flex container has only one line.
Valid values: `flex-start` (lines are packed to the start of the container), `flex-end` (lines are packed to the end of the container), `center` (lines are packed to the center of the container), `space-between` (lines are evenly distributed; the first line is at the start of the container while the last one is at the end), `space-around` (lines are evenly distributed with equal space between them), and `stretch` (lines are stretched to take up the remaining space).
Default value: `stretch`. ## Additional children props -The following props are available for elements that are direct children of a ``. +When an element is a direct child of ``, you can work with the following additional properties. | Name | Type | Description | |------|------|-------------| -`order` | `Number` | Sets the order in which the child item appears in relation to the remaining child items. -`flexGrow` | `Number` | Indicates that the child item should grow in size, if necessary. Sets how much the child item will grow relative to the rest of the child items in the flex container. -`flexShrink` | `Number` | Indicates that the child item should shrink when the row runs out of space. Sets how much the flex item will shrink relative to the rest of the child items in the flex container. When not specified, its value is set to 1. -`alignSelf` | `String` | (Android-only) Overrides the `alignItems` value for the child item.
Valid values: `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 on the cross axis), `baseline` (the item baselines are aligned), and `stretch` (stretch to fill the container but respect `min-width` and `max-width`).
Default value: `stretch`. +`order` | `Number` | Sets the order in which the child element appears in relation to the remaining child elements. +`flexGrow` | `Number` | Indicates that the child should grow in size, if necessary. Sets how much the child will grow relative to the rest of the child elements in the flex container. +`flexShrink` | `Number` | Indicates that the child should shrink when the row runs out of space. Sets how much the flex item will shrink relative to the rest of the child elements in the flex container. When not specified, its value is set to 1. +`alignSelf` | `String` | (Android-only) Overrides the `alignItems` value for the child.
Valid values: `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 on the cross axis), `baseline` (the item baselines are aligned), and `stretch` (stretch to fill the container but respect `min-width` and `max-width`).
Default value: `stretch`. `flexWrapBefore` | `Boolean` | When `true`, forces the item to wrap onto a new line. This property is not part of the official Flexbox specification.
Default value: `false`. \ No newline at end of file diff --git a/content/docs/en/elements/layouts/grid-layout.md b/content/docs/en/elements/layouts/grid-layout.md index b8acc1bf..4518026b 100644 --- a/content/docs/en/elements/layouts/grid-layout.md +++ b/content/docs/en/elements/layouts/grid-layout.md @@ -4,23 +4,23 @@ apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_grid_lay contributors: [rigor789, ikoevska] --- -`` is a layout component that lets you arrange its child elements in a table-like manner. +`` is a layout container that lets you arrange its child elements in a table-like manner. The grid consists of rows, columns, and cells. A cell can span one or more rows and one or more columns. It can contain multiple child elements which can span over multiple rows and columns, and even overlap each other. -By default, the `` has one column and one row. You can add columns and rows by configuring the `columns` and the `rows` property. In these properties, you need to set the number of columns and rows and their width and height. You set the number of columns by listing their widths, separated by a comma. You set the number of rows by listing their heights, separated by a comma. +By default, `` has one column and one row. You can add columns and rows by configuring the `columns` and the `rows` properties. In these properties, you need to set the number of columns and rows and their width and height. You set the number of columns by listing their widths, separated by a comma. You set the number of rows by listing their heights, separated by a comma. -You can set a fixed size for column width and row height or you can create them in a responsive manner. +You can set a fixed size for column width and row height or you can create them in a responsive manner: -* **An absolute number:** Indicates a fixed size. +* **an absolute number:** Indicates a fixed size. * **auto:** Makes the column as wide as its widest child or makes the row as tall as its tallest child. * **\*:** Takes as much space as available after filling all auto and fixed size columns or rows. See [Props](#props) for more information. -### Examples +## Examples -#### Grid layout with fixed sizing +### Grid layout with fixed sizing The following example creates a simple 2-by-2 grid with fixed column widths and row heights. @@ -34,7 +34,7 @@ The following example creates a simple 2-by-2 grid with fixed column widths and ```

-#### Grid layout with star sizing +### Grid layout with star sizing The following example creates a grid with responsive design, where space is alotted proportionally to child elements. @@ -48,7 +48,7 @@ The following example creates a grid with responsive design, where space is alot ```

-#### Grid layout with fixed and auto sizing +### Grid layout with fixed and auto sizing ```html @@ -60,7 +60,7 @@ The following example creates a grid with responsive design, where space is alot ```

-#### Grid layout with mixed sizing and merged cells +### Grid layout with mixed sizing and merged cells The following example creates a complex grid with responsive design, mixed width and height settings, and some merged cells. @@ -86,11 +86,11 @@ The following example creates a complex grid with responsive design, mixed width ## Additional children props -When an element is a direct child of the GridLayout, you can work with the following additional properties. +When an element is a direct child of ``, you can work with the following additional properties. | Name | Type | Description | |------|------|-------------| `row` | `Number` | Specifies the row for this element. Combined with a `col` property, specifies the cell coordinates of the element.
The first row is indicated by `0`. `col` | `Number` | Specifies the column for the element. Combined with a `row` property, specifies the cell coordinates of the element.
The first column is indicated by `0`. `rowSpan` | `Number` | Specifies the number of rows which this element spans across. -`colSpan` | `Number` | Specifies the number of columns which this element spans across. +`colSpan` | `Number` | Specifies the number of columns which this element spans across. \ No newline at end of file diff --git a/content/docs/en/elements/layouts/stack-layout.md b/content/docs/en/elements/layouts/stack-layout.md index 19056c56..4dd5fa93 100644 --- a/content/docs/en/elements/layouts/stack-layout.md +++ b/content/docs/en/elements/layouts/stack-layout.md @@ -1,14 +1,14 @@ --- title: StackLayout apiRef: https://docs.nativescript.org/api-reference/modules/_ui_layouts_stack_layout_ -contributors: [rigor789] +contributors: [rigor789, ikoevska] --- -The StackLayout container stacks the child elements either vertically (default), or horizontally. +`` is a layout container that lets you stack the child elements vertically (default) or horizontally. ### Samples -#### Default StackLayout +#### Default stacking ```html @@ -19,7 +19,7 @@ The StackLayout container stacks the child elements either vertically (default), ```

-#### Horizontal StackLayout +#### Horizontal stacking ```html @@ -30,7 +30,7 @@ The StackLayout container stacks the child elements either vertically (default), ```

-#### StackLayout with horizontally aligned children +#### Stack layout with horizontally aligned children ```html @@ -46,7 +46,7 @@ The StackLayout container stacks the child elements either vertically (default), ```

-#### Horizontal StackLayout with vertically aligned children +#### Horizontal stack layout with vertically aligned children ```html @@ -64,11 +64,11 @@ The StackLayout container stacks the child elements either vertically (default), ## Props -| name | type | description | +| Name | Type | Description | |------|------|-------------| -`orientation` | `String` | Specifies the direction of the stacking. Possible values are `vertical` and `horizontal`. The default value is `vertical`. +`orientation` | `String` | Specifies the stacking direction.
Valid values: `vertical` and `horizontal`.
Default value: `vertical`. -## Additional Children Props +## Additional children props -There are no additional properties for child elements. +None. \ No newline at end of file From 9f2f42d1f78362aff35d3d138109ceb3b449b7ed Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Thu, 26 Jul 2018 14:13:03 +0300 Subject: [PATCH 09/18] Polishing PR --- content/docs/en/elements/layouts/absolute-layout.md | 2 +- content/docs/en/elements/layouts/dock-layout.md | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/en/elements/layouts/absolute-layout.md b/content/docs/en/elements/layouts/absolute-layout.md index a61ac258..fd9287a5 100644 --- a/content/docs/en/elements/layouts/absolute-layout.md +++ b/content/docs/en/elements/layouts/absolute-layout.md @@ -38,7 +38,7 @@ The `` container is the simplest layout container in NativeScrip ## Props -`` has no props. +None. ## Additional children props diff --git a/content/docs/en/elements/layouts/dock-layout.md b/content/docs/en/elements/layouts/dock-layout.md index 23ac50ce..81c258b0 100644 --- a/content/docs/en/elements/layouts/dock-layout.md +++ b/content/docs/en/elements/layouts/dock-layout.md @@ -14,7 +14,7 @@ contributors: [rigor789, ikoevska] ## Examples -### Dock to every side without stretching last child +### Dock to every side without stretching the last child ```html @@ -26,7 +26,7 @@ contributors: [rigor789, ikoevska] ```

-### Dock to every side with stretching last child +### Dock to every side and stretch the last child ```html @@ -51,7 +51,7 @@ contributors: [rigor789, ikoevska] ``` -### Multiple children on the same side +### Dock multiple children to the same side ```html From d5f51e01818d4aa202ba322ee33931c4c3a77cc5 Mon Sep 17 00:00:00 2001 From: Iva Koevska Date: Sat, 28 Jul 2018 13:46:02 +0300 Subject: [PATCH 10/18] 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. --- layouts/docs.ejs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layouts/docs.ejs b/layouts/docs.ejs index c331f959..144d7eaf 100644 --- a/layouts/docs.ejs +++ b/layouts/docs.ejs @@ -47,7 +47,7 @@ text-blue-dark p-4 my-8">

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies:

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.