List
A list in a Card or next to another component. A plain list of text is markdown, not a List. Give "items" (strings or { "label", "value"?, "description"?, "icon"? }); without an action, an item with a value is a key and value row, for facts like Price: $1,599. Or, when there are no items, give "children": ListItem ids or a template. With an "action", the user can pick an item: the event context gets "index", "label" and "value" of the item.
Examples
Loading examples…
Props
| Prop | Type | Description |
|---|---|---|
items | string | object[] | Strings or { "label", "value"?, "description"?, "icon"? }, or { "@path": "/x" } |
direction | "vertical" | "horizontal" | Default "vertical". "horizontal" scrolls sideways |
align | "start" | "center" | "end" | "stretch" | |
weight | number | flex-grow in a Row or Column |
marker | "bullet" | "number" | "rich" | "none" | Default "bullet" |
connector | "none" | "solid" | Default "none" |
gap | number | string | |
start | number | The first number of marker "number" |
maxMarkerSize | number | The width of the marker column in pixels |
Slots
children· multiple
Events
action· Runs when the user picks an item. The args are the index, label and value of the item.
ListItem
An item of a List, with a label, a value on the right, a description, an icon and children. With an "action", the user can pick it.
Loading examples…
| Prop | Type | Description |
|---|---|---|
label | string | |
value | string | number | Without an action: shown on the right of the label, for a key and value fact |
description | string | |
icon | string | Lucide icon name |
marker | string | Shows this text as the marker |
markerSize | number | The width of the marker column in pixels |
disabled | boolean | Greys the item out and ignores its action |
Slots
children· multiple
Events
action· Runs when the user picks the item.