Another Vue of NativeScript Webinar is now on YouTube
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.

El contenedor <WrapLayout> permite posicionar los elementos hijos en filas o columnas, usando una propiedad de orientación. El contenedor coloca los elementos hasta que el espacio este totalmente ocupado y luego envuelve los elementos restantes en una nueva fila o columna.

Ejemplos

Contenedor envolvente por defecto (horizontal)

El siguiente ejemplo crea una fila de elementos equivalentes en tamaño. Cuando no queda suficiente, el contenedor envuelve el último elemento en una nueva fila.

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

Contenedor envolvente vertical

El siguiente ejemplo crea una columna de elementos equivalentes en tamaño. Cuando no queda suficiente, el contenedor envuelve el último elemento en una nueva columna.

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

Propiedades

NombreTipoDescripción
orientationStringIndica el tipo de orientación en la cual fluyen los elementos. Si el valor es horizontal los items son alineados en filas. Si el valor es vertical, los items son alineados en columnas.
Valor por defecto: horizontal.
itemWidthNumberEstablece el ancho utilizado para medir y posicionar cada elmento hijo.
Valor por defecto: Number.NaN (no restringe elementos hijos).
itemHeightNumberEstablece el alto utilizado para medir y posicionar cada elmento hijo.
Valor por defecto: Number.NaN (no restringe elementos hijos).

Propiedades de elementos hijos

No existen propiedades adicionales para los elementos hijos.

Contributors