Introduction
The list component is used to display multiple items in a horizontal, vertical or grid pattern. Based on the datasource, it renders each item in the datasource with a customized card.
When you drag in a list component, 2 empty cards get rendered on the canvas inside this component. Those are dropzones. You can drop in components from the library to design the card as per needed.
The design for the cards cannot vary between different items so any changes made to one will reflect in all the others.
Accessing list data from child components
When you render a list, you want each individual list item to have titles, subtitles etc based on the datasource item that it's representing. This can be done by accessing the self variable
For example, in a list of users, we want our text component inside the list item to show the name of the user.
In order to access the name of the user from within the list, we can access it using {{self.data.name}}.
The list component will replace
{{self.data.name}}with the name stored in each list item key.
Configuration Options
Label
Expected Type: String
The text that displays inside the list.
Datasource
Expected Type: Object | Item
The datasource powering the list. Must be a list of items. For each item in the list, the list component renders a new card component. Card components can refer to the item's data using {{self.data}}
The two empty cards shown when the list is empty are not shown in preview or the published app.
List Type
Expected Type: Vertical | Horizontal | Grid
Determines how the list is rendered.
- Vertical Lays out all the elements vertically one after the other similar to rows.
- Horizontal Lays out all the elements horizontally one after the other similar to columns.
- Grid Lays out all the elements horizontally and vertically to form a grid.
Auto Height
Expected Type: String
Determines how the height of the list items are configured. If this is enabled, then the heights would be determined by the contents of the list item. (Useful when a paragraph of unknown length needs to be displayed).
If Disabled, you can manually configure the height of the list item but it will be the same across all items.
Triggers
Click:Triggers whenever the list is clicked.Double Click:Triggers whenever the list is clicked twice in quick succession.Right Click:Triggers whenever the list is right-clicked.Mouse Enter:Triggers whenever the mouse starts hovering over the component.Mouse Leave:Triggers whenever the mouse stops hovering over the component.
Theme Options
Title Align:The title's text alignment. (Number | Pixels)Title Color:The title's text color. (String | Hex)Title Style:The title's text style. (Bold | Italic | Underline)Text Size:The title's text size. (Number | Pixels)Padding:The chart's padding. (Number | Pixels)Shadow:The chart's shadow. (Shadow)Border:The chart's border. You can also specify the radius for the edges. (Border)Background Color:The chart's background color. (String | Hex)