The collection element is used to show a list of items using a component as base for the repetition. This can be used, for example, to display a list of products in an e-commerce, using a product card as repeated component.
In the component, the value of the current item in the collection is available through the item property.
Collections have a method that reloads their data based on a trigger. Consider you have a collection and want to refetch it's data after clicking a button. You can bind a Call Element Method action to your button click event, select the collection and the Reload method.
Source of the array of items that will feed the collection
The component that will be repeated for the array of items
The component that will be displayed when there is no element in the array of items
The component that will be displayed if there is an error when getting the array of items
The component that will be displayed while the array of items is loaded
The direction the items will be placed in the collection. It can be either vertical or horizontal
Rows per scroll
How many rows of items will be necessary to fill the height of the collection
Columns per scroll
How many columns of items will be necessary to fill the width of the collection
Hide scroll bar?
Whether the scrollbar should be hidden (the behaviour is kept the same, but visually there will be no scrollbar)
Space between items
How much space should there be between the items of the collection
What should be the inner padding of the collection