slot element

Marks where a component places the child elements it was given.

Syntax

{ "type": "slot" }

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

Properties

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

Example

{
  "type": "column",
  "className": "stat",
  "elements": [
    { "type": "text", "variant": "caption", "bind": "props.label" },
    { "type": "text", "variant": "h3", "bind": "props.value" },
    { "type": "slot" }
  ]
}

This example is a component's root. A page using the component writes {"type": "component", "use": "stat.component.iwc", "props": {…}, "elements": [ … ]} and those elements appear where the slot is. slot names a prop that holds elements, for components with more than one slot.

Expected output

This example depends on project configuration (an API, a component or a widget file), so it is not rendered here; it is validated against the schema.

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.