WrapLayout

This is an overview of the most common usage of WrapLayout. For more information about the available properties, methods, or events, head over to the complete API documentation for WrapLayout.

<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

NameTypeDescription
orientationStringSpecifies the stacking direction.
Valid values: horizontal (arranges items in rows) and vertical (arranges items in columns).
Default value: horizontal.
itemWidthNumberSets the width used to measure and layout each child.
Default value: Number.NaN, which does not restrict children.
itemHeightNumberSets the height used to measure and layout each child.
Default value is Number.NaN, which does not restrict children.

Additional children props

None.

Contributors