list-item

inside list

One row of a list: a title, an optional detail line and value on the right, and anything inside it (a badge, a check, a row) under the title. Give it on= to make it pressable.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the props"text"detailtrailingicon

Props

"text"textThe row's title.required

detailstringA second, quieter line under the title.—

trailingstringA short value on the right, like a price or a count.—

iconstringAn icon before the text, by name from icon's list, e.g. icon=check-circle.—

onactionActions to run when the row is pressed, e.g. emit:changed. Separate several with ;—

ifconditionShow only when this expression is true, e.g. if=done or if={count>0}. Every element takes it.—

tipstringA short explanation shown on hover, keyboard focus or a tap, e.g. tip="Orders not yet shipped": for a term or a number some people won't know, instead of more words on screen. It makes the element a Tab stop if it isn't one. Every element takes it.—

Children: any elements.

Only inside: list

For your model

The exact guide entry a model gets for list-item, generated from the same definition.

  list-item "<text>"  — One row of a list: a title, an optional detail line and value on the right, and anything inside it (a badge, a check, a row) under the title. Give it on= to make it pressable.
    "<text>" (required)  The row's title.
    detail=<string>  A second, quieter line under the title.
    trailing=<string>  A short value on the right, like a price or a count.
    icon=<string>  An icon before the text, by name from icon's list, e.g. icon=check-circle.
    on=<action>  Actions to run when the row is pressed, e.g. emit:changed. Separate several with ;
    children: any elements
    only inside: list
    example:
      list-item "Rain shell" detail="Packs into its pocket" trailing="$129" icon=package on=emit:open_shell

  list  — A bordered list of rows, separated by lines. Use list-item children; any other element (a row, a check) becomes a row of its own.
    children: any elements
    example:
      list
        list-item "Trail runner socks" detail="Merino blend" trailing="$24"
        list-item "Rain shell" detail="Packs into its pocket" trailing="$129" on=emit:open_shell

More layout

column row overlap grid card list accordion divider spacer each timeline step carousel scroll

All layout elements on one page →