`stack` element

Same as column: children stacked vertically. Often used for repeated records.

Renders

<div> with display: flex; flex-direction: column

Required

Nothing beyond type. With a list data source it needs item.

Native apps

Compiled native apps and server-driven apps

Syntax

stack element

{ "type": "stack" }

An element lives in a screen's sections, another element's elements, a layout slot or a component root.

Properties

Property	Type	Description
`elements`	`array of element`
`layout`	`object`	`align`: `"start" \| "center" \| "end" \| "stretch" \| "baseline"` `direction`: `"row" \| "column" \| "row-reverse" \| "column-reverse"` `gap`: `string` `justify`: `"start" \| "center" \| "end" \| "between" \| "around" \| "evenly"` `wrap`: `boolean`
`gap`	`string`
`data`	`object`	`aggregate`: `object` — summarise in the database: one record per group with its measures; sort by a group or measure name `as`: `string` — identifiers use letters, digits and '_' and do not start with a digit `cache`: `duration (500ms, 6s…)` — durations look like 500ms, 30s, 5m, 1h or 7d `columns`: `array of string` `filter`: `object {name: string \| number \| boolean \| null \| object}` `include`: `object {name: object}` — related records loaded with each record, one query per include: {"category": {}} or {"reviews": {"source": "DATABASE.reviews", "on": "product"}} `items`: `array of any` — inline records for STATIC sources `limit`: `integer (1–500)` `live`: `boolean` — re-render when the underlying records change (server push) `mode`: `"list" \| "single"` `paginate`: `object` `query`: `object {name: string \| number \| boolean \| null \| object}` — API sources: query values passed to the api (literals or {param\|query\|props} references) `refresh`: `duration (500ms, 6s…)` — durations look like 500ms, 30s, 5m, 1h or 7d `required`: `boolean` — page data: when nothing matches, the page answers 404 `search`: `object` `sort`: `object` `source`: `string` — sources are DATABASE.<schema>, API.<name>, STATIC, USER, STATE.<store>.<list> or an expression giving a list ("=product.images")
`item`	`element`
`empty`	`element`
`error`	`element`

Plus the properties every element accepts: id, className, style, responsive, states, animation, visible, ariaLabel, attributes and more.

Example

stack example

{
  "type": "stack",
  "layout": { "direction": "column", "gap": "8px" },
  "data": {
    "source": "DATABASE.products",
    "columns": ["name", "stock"],
    "sort": { "field": "name" },
    "limit": 3
  },
  "item": {
    "type": "row",
    "layout": { "justify": "between" },
    "elements": [
      { "type": "text", "variant": "label", "bind": "name" },
      { "type": "text", "variant": "caption", "bind": "stock", "suffix": " in stock" }
    ]
  },
  "empty": { "type": "text", "content": "Nothing here yet." }
}

Expected output

The HTML IWC rendered for the example above (inside the page's content wrapper). Class names such as i807b63fc are generated per element for its scoped CSS.

Rendered HTML

<div class="iwc-page ipage" id="iwc-content">
  <div class="iwc-stack if84d5277 iwc-column">
    <div class="iwc-row id8f93ce1">
      <span class="iwc-text id55d6c91 iwc-text-label" data-bind="name">Desk Lamp</span><small class="iwc-text i725f5635 iwc-text-caption" data-bind="stock" data-prefix="" data-suffix=" in stock">12 in stock</small>
    </div>
    <div class="iwc-row id8f93ce1">
      <span class="iwc-text id55d6c91 iwc-text-label" data-bind="name">Dot Notebook</span><small class="iwc-text i725f5635 iwc-text-caption" data-bind="stock" data-prefix="" data-suffix=" in stock">7 in stock</small>
    </div>
    <div class="iwc-row id8f93ce1">
      <span class="iwc-text id55d6c91 iwc-text-label" data-bind="name">Stoneware Mug</span><small class="iwc-text i725f5635 iwc-text-caption" data-bind="stock" data-prefix="" data-suffix=" in stock">40 in stock</small>
    </div>
  </div>
</div>

Data, conditions & styling

Conditional rendering: "visible": {"auth": "signed-in"}, {"roles": ["admin"]} or an expression such as "=product.stock > 0". Decided on the server: hidden elements are never sent.
Data binding: bind takes text from data (name, user.name, props.title, params.slug, state.cart.count); binds binds attributes. Containers become data-driven with data + item. See data binding.
Styling: className for your stylesheets, style for CSS in JSON, states for hover/focus/active, animation for entrance motion. See the style property reference.
Responsive behaviour: responsive applies CSS at or below a breakpoint ({"mobile": {"padding": "12px"}}); grids also take responsiveColumns.