Skip to content

Commit c23d7ff

Browse files
rigor789rigor789
committed
chore: cleanup Stack/GridLayout
1 parent 93137e7 commit c23d7ff

File tree

3 files changed

+75
-21
lines changed

3 files changed

+75
-21
lines changed

‎content/ui/grid-layout.md

Lines changed: 72 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
---
22
title: GridLayout
3+
description: A layout container that lets you arrange its child elements in a table-like manner.
4+
contributors:
5+
- rigor789
6+
- Ombuweb
37
---
48

5-
`<GridLayout>` is a layout container that lets you arrange its child elements in a table-like manner.
6-
79
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.
810

911
By default, `<GridLayout>` 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.
@@ -14,8 +16,6 @@ You can set a fixed size for column width and row height or you can create them
1416
- **auto:** Makes the column as wide as its widest child or makes the row as tall as its tallest child.
1517
- **\*:** Takes as much space as available after filling all auto and fixed size columns or rows.
1618

17-
See [References](#references) for more information.
18-
1919
### GridLayout with fixed sizing
2020

2121
The following example creates a simple 2-by-2 grid with fixed column widths and row heights.
@@ -79,23 +79,76 @@ The following example creates a complex grid with responsive design, mixed width
7979

8080
<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript.org/layouts/grid_layout_complex.svg" />
8181

82-
## Reference
82+
## Props
83+
84+
### columns {#grid-columns}
85+
86+
```ts
87+
columns: string // eg. *, 50, auto
88+
```
89+
90+
A string value representing column widths delimited with commas.
91+
92+
Valid values: an absolute number, `auto`, or `*`:
93+
94+
- A number indicates an absolute column width.
95+
- `auto` makes the column as wide as its widest child.
96+
- `*` makes the column occupy all available horizontal space. The space is proportionally divided over all star-sized columns. You can set values such as `3*` and `5*` to indicate a ratio of 3:5 in sizes.
97+
98+
### rows {#grid-rows}
99+
100+
```ts
101+
rows: string // eg. *, 50, auto
102+
```
103+
104+
A string value representing row heights delimited with commas.
105+
106+
Valid values: an absolute number, `auto`, or `*`:
107+
108+
- A number indicates an absolute row height.
109+
- `auto` makes the row as tall as its tallest child.
110+
- `*` makes the row occupy all available vertical space. The space is proportionally divided over all star-sized rows. You can set values such as `3*` and `5*` to indicate a ratio of 3:5 in sizes.
111+
112+
### ...Inherited
113+
114+
Additional inherited properties not shown. Refer to the [API Reference](/api/class/GridLayout).
83115

84-
### Props
116+
## Children props
85117

86-
| Name | Type | Description |
87-
| -------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
88-
| `columns` | `String` | A string value representing column widths delimited with commas.<br/>Valid values: an absolute number, `auto`, or `*`.<br/>A number indicates an absolute column width. `auto` makes the column as wide as its widest child. `*` makes the column occupy all available horizontal space. The space is proportionally divided over all star-sized columns. You can set values such as `3*` and `5*` to indicate a ratio of 3:5 in sizes. |
89-
| `rows` | `String` | A string value representing row heights delimited with commas.<br/>Valid values: an absolute number, `auto`, or `*`.<br/>A number indicates an absolute row height. `auto` makes the row as tall as its tallest child. `*` makes the row occupy all available vertical space. The space is proportionally divided over all star-sized rows. You can set values such as `3*` and `5*` to indicate a ratio of 3:5 in sizes. |
90-
| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/gridlayout) |
118+
When an element is a direct child of `<GridLayout>`, these properties are accounted for:
91119

92-
### Children props
120+
### row
93121

94-
When an element is a direct child of `<GridLayout>`, you can work with the following additional properties.
122+
```ts
123+
row: number
124+
```
125+
126+
The row for the element.
127+
128+
The rows are 0-indexed, so the first row is indicated by `0`.
129+
130+
### col
131+
132+
```ts
133+
col: number
134+
```
135+
136+
The column for the element.
137+
138+
The columns are 0-indexed, so the first column is indicated by `0`.
139+
140+
### rowSpan
141+
142+
```ts
143+
rowSpan: number
144+
```
145+
146+
The number of rows for the element to span across.
147+
148+
### colSpan
149+
150+
```ts
151+
colSpan: number
152+
```
95153

96-
| Name | Type | Description |
97-
| --------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
98-
| `row` | `Number` | Specifies the row for this element. Combined with a `col` property, specifies the cell coordinates of the element.<br/>The first row is indicated by `0`. |
99-
| `col` | `Number` | Specifies the column for the element. Combined with a `row` property, specifies the cell coordinates of the element.<br/>The first column is indicated by `0`. |
100-
| `rowSpan` | `Number` | Specifies the number of rows which this element spans across. |
101-
| `colSpan` | `Number` | Specifies the number of columns which this element spans across. |
154+
The number of columns for the element to span across.

‎content/ui/index.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
title: UI Components
33
description: NativeScript ships with commonly used UI components, these are the foundational building blocks. Additional UI components can be created or installed via plugins.
44
contributors: false
5+
prev: false
6+
next: false
57
---
68

79
<script setup lang="ts">

‎content/ui/stack-layout.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
---
22
title: StackLayout
3+
description: A layout container that arranges child views in a horizontal or vertical stack.
34
contributors:
45
- rigor789
56
- Ombuweb
67
- ammarahm-ed
78
---
89

9-
`<StackLayout>` is a layout container that arranges child views in a horizontal or vertical stack.
10-
1110
When you add child views to a StackLayout, they will be arranged one after the other in the specified direction, either horizontally or vertically. By default, the orientation of a StackLayout is vertical, but you can change it to `horizontal` by setting the `orientation` property.
1211

1312
::: danger Important

0 commit comments

Comments
 (0)