Skip to content
ONIWC
iwc 0.1.0

main element

A generic wrapper (rendered as a div; the page's own

comes from the layout).

Renders

<div>

Required

Nothing beyond type.

Native apps

Compiled native apps and server-driven apps

Syntax

main element
{ "type": "main" }

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

Properties

PropertyTypeDescription
elementsarray of element
layoutobject
  • align: "start" | "center" | "end" | "stretch" | "baseline"
  • direction: "row" | "column" | "row-reverse" | "column-reverse"
  • gap: string
  • justify: "start" | "center" | "end" | "between" | "around" | "evenly"
  • wrap: boolean
gapstring

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

Example

main example
{
  "type": "main",
  "className": "content",
  "elements": [{ "type": "text", "variant": "h1", "content": "Orders" }]
}

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-main i7117cf5a content">
    <h1 class="iwc-text i780ab956 iwc-text-h1">
      Orders
    </h1>
  </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.