List
A list component displays a collection of items in an ordered or unordered format. It's fundamental for presenting data in a readable, linear manner.
Lists can be simple, showing just text, or more complex, including images, icons, and actions. They are often used for menus, search results, or displaying sets of similar data. Customization includes bullet styles, indentation, and interactive behaviors like selection or drag-and-drop.
Examples
Various examples showcasing different configurations of the component
Examples
Property
Value
Padding
16
Items
[{"title":"Title 1","subtitle":"This is subtitle 1","image":"https://picsum.photos/1000?q=1"},{"title":"Title 2","subtitle":"This is subtitle 2","image":"https://picsum.photos/1000?q=2"}]
Flex configuration
{"gap":"20"}
Selection
Property
Value
Padding
16
Items
[{"title":"Title 1","subtitle":"This is subtitle 1","image":"https://picsum.photos/1000?q=1"},{"title":"Title 2","subtitle":"This is subtitle 2","image":"https://picsum.photos/1000?q=2"}]
Enable selection
true
Flex configuration
{"gap":"20","orientation":"HORIZONTAL"}
Properties
Each component can be customized and configured based on product requirements. You can modify the component on Canonic by clicking on the component and opening the configuration panel.
Property
Description
Default Value
Type
Items
Array flat
Elevation
The elevation level of the container.
1
String
BG Color
The background color of the container.
#FFFFFF
Color
Flex configuration
The flex configuration of the card.
{"orientation":"VERTICAL","justifyContent":"START","alignItems":"STRETCH","flexWrap":"WRAP"}
Flex
Item min height
The min height of the card.
Number
Stretch items
Whether the items should be stretched or not.
Bool
Enable selection
Whether the items should be selectable or not.
Bool
Default selected index
The default selected index.
Number
Zero state
The text to display when there are no items.
No items
String
Triggers
Components expose certain events such as clicking. You can use these events to perform actions such as navigation, fetching data and controlling other components. The events exposed by this component are listed below.
Property
Description
On click
Triggered when the card is clicked.
On double click
Triggered when the card is double clicked.