Tabs

A tabbed container that shows one content panel at a time. Users click tab headers to switch between panels.

Properties

Property	Type	Default	Description
tabs	array	[{id: 'tab1', label: 'Tab 1'}, {id: 'tab2', label: 'Tab 2'}]	Array of tab definitions. Each tab has an id (unique identifier) and label (display text).

Tabs are configured via the property panel. Each tab entry has:

• id -- a unique string identifier for the tab (e.g., overview, details, reviews).
• label -- the text shown on the tab header.

Container

This widget is a container. Each tab acts as a separate container zone -- drag widgets into the active tab panel to populate it. Switch tabs in the builder to add content to each panel.

Example

A product detail page with three tabs:

tabs:
  - id: overview, label: Overview
  - id: specs, label: Specifications
  - id: reviews, label: Reviews

• Overview tab: Heading, Text, Image widgets showing the product summary.
• Specs tab: A table or list of product specifications.
• Reviews tab: A Repeater showing customer reviews.

Tips

• Add or remove tabs by editing the tabs array in the property panel.
• Tab IDs must be unique within the widget. Use descriptive IDs like details rather than tab1.
• Style the tab headers (font, color, active indicator) via the Design tab.
• Only the active tab's content is rendered at any time, keeping the DOM lightweight.