each

Repeats what's inside it once per item of a list, in place, with no look of its own; inside, the current item is called item (or the name given by as=). if= on each keeps only the items it's true for: each items=tasks as=t if={owner == 'All' || t.owner == owner}.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the props

Props

itemsexpressionThe list to repeat over, like todos or {cart}.required

asnameName for the current item, used inside: as=t makes {t.text} work.item

indexnameName for the item's position, counting from 0.—

keyexpressionA value unique to each item, like {t.id}, so focus stays with the item when the list changes. Defaults to the position.—

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.

For your model

The exact guide entry a model gets for each, generated from the same definition.

  each  — Repeats what's inside it once per item of a list, in place, with no look of its own; inside, the current item is called item (or the name given by as=). if= on each keeps only the items it's true for: each items=tasks as=t if={owner == 'All' || t.owner == owner}.
    items=<expression, required>  The list to repeat over, like todos or {cart}.
    as=<name>  Name for the current item, used inside: as=t makes {t.text} work.
    index=<name>  Name for the item's position, counting from 0.
    key=<expression>  A value unique to each item, like {t.id}, so focus stays with the item when the list changes. Defaults to the position.
    children: any elements
    example:
      state gear=[{name: "Tent", kg: 2.1}, {name: "Stove", kg: 0.4}, {name: "Headlamp", kg: 0.1}]
      column gap=6
        each items=gear as=g index=i key={g.name}
          text "{i + 1}. {g.name}, {g.kg} kg"

More layout

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

All layout elements on one page →