Products · Components
ListItem
One row in a List: a title, a subtitle, an icon or picture, and a value or badge at the end.
Anything you put inside it, such as a Badge, shows at the end in place of value.
Children: Components
Example
<List>
<ListItem icon="receipt" title="Electricity" subtitle="Meter 0412 3456 789" onTap="open" data-id="electricity">
<Badge tone="warning">Due</Badge>
</ListItem>
</List>export default definePage({
initialState: {},
actions: {
open(_state, event: DataEvent<{ id: string }>) {
this.navigation.push('bill', { id: event.data.id });
},
},
});Props
| Prop | Type | What it is |
|---|---|---|
title | string | |
subtitle | string | |
value | string | |
icon | icon name, or one of your own icons | |
image | string | A picture at the start of the row, in place of icon. It takes the same addresses as an Image's src. |
disabled | boolean | Dims it, and the person can't use it. Default: false. |
padding, paddingTop, paddingStart, paddingEnd, paddingBottom | spacing | Space inside its edges, all round or on one side. |
Events
| Event | Sends | Notes |
|---|---|---|
onTap | Nothing | A tappable item shows a chevron. |