tabs element

Switches between panels of related content.

Syntax

{ "type": "tabs" }

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": "tabs",
  "tabs": [
    {
      "label": "Details",
      "elements": [{ "type": "text", "content": "Solid oak, brass fittings." }]
    },
    { "label": "Shipping", "elements": [{ "type": "text", "content": "Ships in 2 days." }] }
  ]
}

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.

<div class="iwc-page ipage" id="iwc-content">
  <div class="iwc-tabs i8021039a" data-iwc-tabs>
    <div class="iwc-tablist" role="tablist">
      <button type="button" class="iwc-tab" role="tab" aria-selected="true" data-tab="0">
        Details
      </button>
      <button type="button" class="iwc-tab" role="tab" aria-selected="false" data-tab="1">
        Shipping
      </button>
    </div>
    <div class="iwc-tabpanel" role="tabpanel" data-panel="0">
      <p class="iwc-text iabe90af7">
        Solid oak, brass fittings.
      </p>
    </div>
    <div class="iwc-tabpanel" role="tabpanel" data-panel="1" hidden>
      <p class="iwc-text i79280821">
        Ships in 2 days.
      </p>
    </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.