List
Last updated
Last updated
List is used to render each item from an array of data. Each item in the list shares the same layout structure, but renders distinct data from the array item.
There are 3 main ways to send data to a list: selecting a data node, setting element data, or through an interaction.
In properties, you can select a data node to use for the list.
You can also send data through an interaction. In this example, the array [1,2,3] will be sent to the list when a button is clicked.
Let’s say the list data was [”a”,”b”,”c”].
To access the list’s data, you can use $item (the item data), $index (the item index of the list), and $list (the array).
Here, there is a button, text, and divider element added to a list.
This is how the list would look in production.
You can customize the content for when the list data is empty.
Hover over the Change View Mode arrow and select empty. Then you’ll be able to drag in elements to build the empty view.
No supported events.
Set List Data: Set data to use for the list.
Set Data: Change element data. See Data Store.
Set Loading: Set loading animation. See Set loading animations.
Visit Interactions for more on events and actions.
The array can be set in the Data tab on the left panel.
