WrapLayout - NativeScript-Vue

<WrapLayout> 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.

Examples

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.

<WrapLayout backgroundColor="#3c495e">
  <Label text="first" width="30%" height="30%" backgroundColor="#43b883"/>
  <Label text="second" width="30%" height="30%" backgroundColor="#1c6b48"/>
  <Label text="third" width="30%" height="30%" backgroundColor="#289062"/>
  <Label text="fourth" width="30%" height="30%" backgroundColor="#289062"/>
</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.

<WrapLayout orientation="vertical" backgroundColor="#3c495e">
  <Label text="first" width="30%" height="30%" backgroundColor="#43b883"/>
  <Label text="second" width="30%" height="30%" backgroundColor="#1c6b48"/>
  <Label text="third" width="30%" height="30%" backgroundColor="#289062"/>
  <Label text="fourth" width="30%" height="30%" backgroundColor="#289062"/>
</WrapLayout>

Props

Name	Type	Description
`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

None.