diff --git a/content/docs/en/elements/layouts/absolute-layout.md b/content/docs/en/elements/layouts/absolute-layout.md index 941998f2..237a1f9d 100644 --- a/content/docs/en/elements/layouts/absolute-layout.md +++ b/content/docs/en/elements/layouts/absolute-layout.md @@ -1,14 +1,22 @@ --- 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 its children at runtime when its size changes. + +## Examples + +### A grid-like layout + +The following example creates a simple grid. For more information about creating grid layouts, see [GridLayout](/en/docs/elements/layouts/grid-layout). ```html @@ -20,7 +28,9 @@ The AbsoluteLayout container is the simplest layout container in NativeScript. I ```

-#### Overlapping elements +### Overlapping elements + +The following example creates a group of overlapping items. ```html @@ -30,17 +40,15 @@ The AbsoluteLayout container is the simplest layout container in NativeScript. I ```

- ## Props -AbsoluteLayout has no props. +None. -## Additional Children Props +## Additional children props -When an element is a direct child of the AbsoluteLayout, the following -props get a meaning: +When an element is a direct child of ``, you can work with the following additional properties. -| 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. +| `left` | `Number` | Gets or sets the distance, in pixels, between the left edge of the child and the left edge of its parent. diff --git a/content/docs/en/elements/layouts/dock-layout.md b/content/docs/en/elements/layouts/dock-layout.md index 07f6c943..178b2fc5 100644 --- a/content/docs/en/elements/layouts/dock-layout.md +++ b/content/docs/en/elements/layouts/dock-layout.md @@ -1,14 +1,22 @@ --- 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 lets you dock 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 you must set the `stretchLastChild` property of the parent to `true`. +* Enforces layout constraints to its children. +* Resizes its children at runtime when its size changes. + +## Examples + +### Dock to every side without stretching the last child + +The following example creates a frame-like layout consisting of 4 elements, position at the 4 edges of the screen. ```html @@ -20,7 +28,9 @@ 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 and stretch the last child + +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. ```html @@ -32,8 +42,25 @@ 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 + +The following example creates a `` of 5 elements. The first four wrap the center element in a frame. + +```html + + + + + + + +``` +

+ +### Dock multiple children to the same side +The following example creates a single line of 4 elements that stretch across the entire height and width of the screen. + ```html @@ -46,15 +73,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: +When an element is a direct child of ``, you can work with the following additional properties. -| 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`. diff --git a/content/docs/en/elements/layouts/flexbox-layout.md b/content/docs/en/elements/layouts/flexbox-layout.md index 24b7e249..6d3f5fde 100644 --- a/content/docs/en/elements/layouts/flexbox-layout.md +++ b/content/docs/en/elements/layouts/flexbox-layout.md @@ -1,15 +1,17 @@ --- 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 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 +The following example creates a row of three equally-sized elements that span across the entire height of the screen. + ```html @@ -21,6 +23,8 @@ The FlexboxLayout container is a non-exact implementation of the [Css Flexbox La #### Column flex layout +The following example creates a column of 3 equally-sized elements that span across the entire width of the screen. + ```html @@ -30,7 +34,9 @@ The FlexboxLayout container is a non-exact implementation of the [Css Flexbox La ```

-#### Row layout with items aligned to flex-start +#### Row flex layout with items aligned to `flex-start` + +The following example creates a row of 3 items placed at the top of the screen. Items are placed in the order they were declared in. ```html @@ -41,7 +47,9 @@ The FlexboxLayout container is a non-exact implementation of the [Css Flexbox La ```

-#### Row layout with custom order +#### Row flex layout with custom order + +The following example creates a row of 3 items placed at the top of the screen. Items are placed in a customized order. ```html @@ -52,7 +60,9 @@ The FlexboxLayout container is a non-exact implementation of the [Css Flexbox La ```

-#### Wrapping +#### Row flex layout with wrapping + +The following example creates four items with enabled line wrapping. When the row runs out of space, the container wraps the last item on a new line. ```html @@ -64,7 +74,13 @@ The FlexboxLayout container is a non-exact implementation of the [Css Flexbox La ```

-#### Reverse column, with different alignSelf +#### Column flex layout with reverse order and items with a different `alignSelf` + +The following example shows how to use: + +* `flexDirection` to place items in a column, starting from the bottom. +* `justifyContent` to create equal spacing between the vertically placed items. +* `alignSelf` to modify the position of items across the main axis. ```html Valid values:
`row` (horizontal, left to right),
`row-reverse` (horizontal, right to left),
`column` (vertical, top to bottom), and
`column-reverse` (vertical, bottom to top).
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` (multiple lines, direction is defined by `flexDirection`),and
`wrap-reverse` (multiple lines, opposite to the 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 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.
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` 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 оn the cross axis),
`baseline` (the item baselines are aligned), and
`stretch` (items are stretched 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: +When an element is a direct child of ``, you can work with the following additional properties. -| name | type | description | +| Name | Type | Description | |------|------|-------------| -`order` | `Number` | Changes the default ordering of the flex items -`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 child element appear in relation to one another. +`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. +`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`. +`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` (items is stretched to fill the container but respects `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..a9293114 100644 --- a/content/docs/en/elements/layouts/grid-layout.md +++ b/content/docs/en/elements/layouts/grid-layout.md @@ -4,13 +4,13 @@ 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. * **auto:** Makes the column as wide as its widest child or makes the row as tall as its tallest child. @@ -18,9 +18,9 @@ You can set a fixed size for column width and row height or you can create them 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,9 @@ 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 + +The following example create a grid with one auto-sized column and one column with fixed size. Rows have a fixed height. ```html @@ -60,7 +62,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 +88,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..e92e9b70 100644 --- a/content/docs/en/elements/layouts/stack-layout.md +++ b/content/docs/en/elements/layouts/stack-layout.md @@ -1,14 +1,16 @@ --- 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 + +The following example creates a vertical stack of 3 equally-sized elements. Items are stretched to cover the entire width of the screen. Items are placed in the order they were declared in. ```html @@ -19,7 +21,9 @@ The StackLayout container stacks the child elements either vertically (default), ```

-#### Horizontal StackLayout +#### Horizontal stacking + +The following example creates a horizontal stack of 3 equally-sized elements. Items are stretched to cover the entire height of the screen. Items are placed in the order they were declared in. ```html @@ -30,7 +34,9 @@ The StackLayout container stacks the child elements either vertically (default), ```

-#### StackLayout with horizontally aligned children +#### Stack layout with horizontally aligned children + +The following example creates a diagonal stack of items with responsive sizes. Items are vertically stacked. ```html @@ -46,7 +52,9 @@ The StackLayout container stacks the child elements either vertically (default), ```

-#### Horizontal StackLayout with vertically aligned children +#### Horizontal stack layout with vertically aligned children + +The following example creates a diagonal stack of items with responsive sizes. Items are horizontally stacked. ```html @@ -64,11 +72,10 @@ 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 diff --git a/content/docs/en/elements/layouts/wrap-layout.md b/content/docs/en/elements/layouts/wrap-layout.md index 6fc1f163..4bb513e9 100644 --- a/content/docs/en/elements/layouts/wrap-layout.md +++ b/content/docs/en/elements/layouts/wrap-layout.md @@ -1,14 +1,16 @@ --- 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 + +The following example creates a row of equally-sized items. When the row runs out of space, the container wraps the last item on a new row. ```html @@ -18,9 +20,12 @@ The WrapLayout container positions its children in rows or columns, based on the ``` +

-#### Vertical WrapLayout +#### Vertical wrap layout + +The following example creates a column of equally-sized items. When the row runs out of space, the container wraps the last item on a new column. ```html @@ -30,17 +35,17 @@ 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` | Specifies the stacking direction.
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 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">

This is an overview of the most common usage of <%= current.title %>. - For more information about the available properties, methods, and events, head over + For more information about the available properties, methods, or events, head over to pFad - Phonifier reborn

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.