Stack macrolite

A flex container that lays its children out in one direction with a gap.

Built from: Box
A2UI basic: RowColumn
Children: many

Preview

Loading the renderer…

direction

gap

align

justify

wrap

createSurface + updateComponents, A2UI v0.9.

json

[
  {
    "version": "v0.9",
    "createSurface": {
      "surfaceId": "preview",
      "catalogId": "https://ui.exponential.at/catalogs/core/v1"
    }
  },
  {
    "version": "v0.9",
    "updateComponents": {
      "surfaceId": "preview",
      "components": [
        {
          "id": "root",
          "component": "Stack",
          "direction": "vertical",
          "align": "stretch",
          "children": [
            "example"
          ]
        },
        {
          "id": "example",
          "component": "Stack",
          "direction": "horizontal",
          "gap": "sm",
          "align": "center",
          "children": [
            "c0-a",
            "c0-t",
            "c0-b"
          ]
        },
        {
          "id": "c0-a",
          "component": "Avatar",
          "name": "Ada Lovelace",
          "size": "sm"
        },
        {
          "id": "c0-t",
          "component": "Text",
          "text": "Ada Lovelace",
          "variant": "body"
        },
        {
          "id": "c0-b",
          "component": "Badge",
          "text": "Owner",
          "variant": "outline"
        }
      ]
    }
  }
]

This surface through a MemoryTransport. Install and transports: React guide.

This surface through a MemoryTransport. Install and transports: SwiftUI guide.

This surface through a MemoryTransport. Install and transports: Compose guide.

This surface through a MemoryTransport. Install and transports: gpui guide.

Platforms

Stack rendered by the React renderer on Web — **Web** React

Stack rendered by the SwiftUI renderer on iOS — **iOS** SwiftUI

Stack rendered by the Compose renderer on Android — **Android** Compose

Stack rendered by the gpui renderer on Desktop — **Desktop** gpui

View exponential-ui-stack, painted by each native renderer.

Variants

direction · horizontal

direction · vertical

wrap

Props

Prop	Type	Default	Description
`direction`resp	`horizontal \| vertical`	`"vertical"`	A row or a column (`{base: "vertical", md: "horizontal"}`).
`gap`resp	`none \| xs \| sm \| md \| lg \| xl`	`"md"`	The space between children.
`align`resp	`start \| center \| end \| stretch`	`"stretch"`	Cross-axis alignment of the children.
`justify`resp	`start \| center \| end \| between \| around \| evenly`	`"start"`	Main-axis distribution of the children.
`wrap`resp	`boolean`	`false`	Lets children wrap onto new lines.
`style`	`style`	–	Extra Box styles merged over the stack's own.

Events and slots

No events, no slots. Children: many.

Accessibility

Role: none
Semantics: none (layout only)

Not focusable; no keys.

Theming

Recipe parts: Stack/root
Keyed by: :hover:pressed:focus:disabled:checked:open:selected:invalid:dragover

Themes · Write a theme