Authoring Layouts Tabbed

Authoring Layouts — Tabbed

A tabbed panel displays multiple sub-layouts behind a row of clickable tabs. Each tab has its own title (and optional icon), and clicking a tab switches the visible content. Use it to fit several distinct views into the same area without overwhelming the player — for example, separate tabs for "Overworld", "Dungeons", and "Bosses".

See Authoring Layouts for the file format and base fields. This page only covers fields specific to the tabbed type.

JSON schema

Parsed in EmoTracker.Data/Layout/TabPanel.cs. Matches the tabbed branch in layouts.json.

Field	Type	Required	Default	Description
type	"tabbed"	yes	—	Literal string.
tabs	array	no	empty	An array of tab definitions (see below).

The orientation and style fields listed in the schema are accepted but currently have no effect on tab rendering — the parser reads them but the runtime applies its standard tab presentation regardless.

Plus the standard base fields from Authoring Layouts → Fields every layout element shares.

Tab definition

Each entry in tabs is an object:

Field	Type	Required	Default	Description
title	string	no	none	The text shown on the tab itself.
icon	string	no	none	A pack-relative image path to display as a tab icon.
icon_image_spec	string	no	none	An image filter spec to apply to the icon.
content	object	no	empty	A single layout element that becomes this tab's body.

The first tab is selected by default when the layout loads.

Examples

A tab strip with three views

{
  "type": "tabbed",
  "tabs": [
    {
      "title": "Overworld",
      "content": {
        "type": "itemgrid",
        "rows": [ [ "sword", "shield", "bow" ] ]
      }
    },
    {
      "title": "Dungeons",
      "content": {
        "type": "itemgrid",
        "rows": [ [ "ep_prize", "dp_prize", "th_prize" ] ]
      }
    },
    {
      "title": "Bosses",
      "content": {
        "type": "layout",
        "key": "bosses_panel"
      }
    }
  ]
}

The third tab embeds another layout via Layout Reference — useful when a tab's content is complex enough to deserve its own layout file.

Tabs with icons instead of text

{
  "type": "tabbed",
  "tabs": [
    {
      "icon": "images/icons/overworld.png",
      "content": { ... }
    },
    {
      "icon": "images/icons/dungeons.png",
      "icon_image_spec": "saturation|0.8",
      "content": { ... }
    }
  ]
}

Tips and pitfalls

• Each tab's content is a single layout element, not an array. Wrap multiple things in a Container or Array if you need more than one element per tab.
• The first tab is initially selected. There's no way to mark a different tab as the default in JSON — reorder them if you want a different default.
• Tabs without title or icon show empty handles. Set at least one or the other on every tab.
• For very busy tab content, consider Layout Reference so each tab's content can live in its own layout file. This keeps the tabbed file readable.
• Tabs are processed at parse time — adding or removing tabs at runtime requires reloading the entire layout.

See also

• Authoring Layouts — top-level format and base fields
• Authoring Layouts — Layout Reference — embed a separately-defined layout as a tab's content
• Authoring — Image Filters — the spec used by icon_image_spec
• layouts.json schema — authoritative JSON schema