mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-11-05 13:26:48 +08:00
38 lines
1.0 KiB
Markdown
38 lines
1.0 KiB
Markdown
---
|
|
nav-title: "grid-layout How-To"
|
|
title: "grid-layout"
|
|
description: "Examples for using grid-layout"
|
|
---
|
|
## GridLayout sample
|
|
### Creating Grid Layout via code.
|
|
<snippet id='grid-layout-require'/>
|
|
|
|
### Create grid layout with an xml declaration
|
|
``` XML
|
|
<GridLayout columns="80, *, auto" rows="auto, *" >
|
|
<Button col="0" />
|
|
<Button col="1" />
|
|
<Button col="2" />
|
|
// by default column and row are set to 0
|
|
<Button row="1" colSpan="3" />
|
|
</GridLayout>
|
|
```
|
|
|
|
### Add views to grid layout
|
|
<snippet id='grid-layout-addviews'/>
|
|
|
|
### Set column property on views - btn1 in first column, btn2 is second and btn3 in third
|
|
<snippet id='grid-layout-setcolumn'/>
|
|
|
|
### Set row property on btn4.
|
|
<snippet id='grid-layout-setrow'/>
|
|
|
|
### Set columnSpan property on btn4 to stretch into all columns
|
|
<snippet id='grid-layout-columnspan'/>
|
|
|
|
### Create ItemSpec for columns and rows 3 columns - 80px, *, auto size and 2 rows - 100px and auto size
|
|
<snippet id='grid-layout-itemspec'/>
|
|
|
|
### Add columns and rows to GridLayout
|
|
<snippet id='grid-layout-add-rowscols'/>
|