ListItem

ListItem

Signature

<List Items="{Data.Items}" As="Item">
  <ListItem>
    <Text Value="{Item.Title}" />
  </ListItem>
</List>

Rules

Scope

• {Item.*}: the current array item
• {Index}: the current index, 0-based

<List Items="{Data.Items}" As="News">
  <ListItem>
    <Text Value="{News.Title}" />
  </ListItem>
</List>

Runtime behavior

• List repeats the ListItem root element once per array entry.
• Each instance has its own Item/Index scope.
• There is no selection state, divider, or click event; put a Button/Link inside the item, or add a Divider.
• Data inside the item template still belongs to the component’s global scope; it is not a per-item data source.

Example

<List Items="{Data.Servers}" As="Server" Gap="1">
  <ListItem>
    <Row Justify="Between" Align="Center">
      <Text Value="{Server.Name}" />
      <Text Value="{Server.Players}" Size="Xs" Color="Muted" />
    </Row>
  </ListItem>
</List>

Gotchas

• Bare text cannot go directly inside ListItem; use Text.Value or the content syntax of Text.
• OnClick on a Button inside an item can bind values from the current item, such as {Item.Url}.