Stack element

A container for nesting flow layouts; with border/background it doubles as a box.

- { type: stack }

Example

stack.report.yaml

title: Stacks
body:
  reportHeader:
    - content:
        - type: stack
          width: 70%
          padding: 10pt
          gap: 4pt
          background: "#F1E6CF"
          border: "0.5pt solid #6B4428"
          content:
            - { type: text, value: Contoso Ltd, fontWeight: bold, fontSize: 12pt }
            - type: stack
              direction: row
              gap: 12pt
              content:
                - { type: text, value: "1 Main Street, Dublin D02", width: 2fr }
                - { type: text, value: Customer since 2019, width: 1fr, align: end, color: "#6B4428" }

Properties

direction

Type: keyword · Default: column

Stacks children top to bottom (column) or side by side (row).

One of:

• column
• row

gap

Type: length

Space between children.

content

Type: list of element

The child elements.

It also has the properties of every element and the style properties.