Layout List

The layout_list component allows components to be displayed in a group/list. It also allows for iteration over an array of data.

Current layouts we support are vertical, horizontal, and scrollable. You can see an example of the scrollable data below as well.

Iterating over an array

By providing an array of objects to field, each item in the array will be applied to the items field. For instance, if there were 3 points in the array, and the items field had only one paragraph component, then the layout_list would produce a list of 3 paragraphs.

Usage

Props

Required properties

"items": // array of component objects

Optional properties

"layout": "vertical" | "horizontal | scrollable" // defaults to vertical
"field": "{{ someVariable.someArray }}" // array of objects, omit if you want to use this purely for layout
"props": {
  "alignItems": "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
  "justifyContent":
    | "flex-start"
    | "flex-end"
    | "center"
    | "space-around"
    | "space-between"
    | "space-evenly";
  "gap": number | string;
  "flexWrap": "nowrap" | "wrap" | "wrap-reverse";
}