Row

IntroductionLinked dataHuman and agentComponents

Layout and media / Row

Place related components beside each other.

Live exampleHow it worksSkill

When to use it

Place related components beside each other.

What the agent supplies

A horizontal layout container for 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/Row")

{
  "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",
      "description": "A layout component that arranges its children horizontally. To create a grid layout, nest Columns within this Row.",
      "properties": {
        "component": {
          "const": "Row"
        },
        "children": {
          "description": "Defines the children. Use an array of strings for a fixed set of children, or a template object to generate children from a data list. Children cannot be defined inline, they must be referred to by ID.",
          "$ref": "https://a2ui.org/specification/v0_9/common_types.json#/$defs/ChildList"
        },
        "justify": {
          "type": "string",
          "description": "Defines the arrangement of children along the main axis (horizontally). Use 'spaceBetween' to push items to the edges, or 'start'/'end'/'center' to pack them together.",
          "enum": [
            "center",
            "end",
            "spaceAround",
            "spaceBetween",
            "spaceEvenly",
            "start",
            "stretch"
          ],
          "default": "start"
        },
        "align": {
          "type": "string",
          "description": "Defines the alignment of children along the cross axis (vertically). This is similar to the CSS 'align-items' property, but uses camelCase values (e.g., 'start').",
          "enum": [
            "start",
            "center",
            "end",
            "stretch"
          ],
          "default": "stretch"
        }
      },
      "required": [
        "component",
        "children"
      ]
    }
  ],
  "unevaluatedProperties": false
}

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