Tabs

IntroductionLinked dataHuman and agentComponents

Layout and media / Tabs

Switch between alternative views of one subject.

Live exampleHow it worksSkill

When to use it

Switch between alternative views of one subject.

What the agent supplies

A tabbed switcher between named child components.

The agent chooses the content and binds it to the component. CLIO then renders the view and its available controls.

What the agent receives

The exact output of load_skill, including resolved local definitions.

load_skill("a2ui-catalog-basic", file="catalog.json#/components/Tabs")

{
  "type": "object",
  "allOf": [
    {
      "$ref": "https://a2ui.org/specification/v0_9/common_types.json#/$defs/ComponentCommon"
    },
    {
      "type": "object",
      "properties": {
        "weight": {
          "type": "number",
          "description": "The relative weight of this component within a Row or Column. This is similar to the CSS 'flex-grow' property. Note: this may ONLY be set when the component is a direct descendant of a Row or Column."
        }
      }
    },
    {
      "type": "object",
      "properties": {
        "component": {
          "const": "Tabs"
        },
        "tabs": {
          "type": "array",
          "description": "An array of objects, where each object defines a tab with a title and a child component.",
          "minItems": 1,
          "items": {
            "type": "object",
            "properties": {
              "title": {
                "description": "The tab title.",
                "$ref": "https://a2ui.org/specification/v0_9/common_types.json#/$defs/DynamicString"
              },
              "child": {
                "$ref": "https://a2ui.org/specification/v0_9/common_types.json#/$defs/ComponentId",
                "description": "The ID of the child component."
              }
            },
            "required": [
              "title",
              "child"
            ],
            "additionalProperties": false
          }
        }
      },
      "required": [
        "component",
        "tabs"
      ]
    }
  ],
  "unevaluatedProperties": false
}

Standard refs (not loadable here): https://a2ui.org/specification/v0_9/common_types.json#/$defs/ComponentCommon, https://a2ui.org/specification/v0_9/common_types.json#/$defs/ComponentId, https://a2ui.org/specification/v0_9/common_types.json#/$defs/DynamicString