NUI / Components / Layout

StackBox

ImplementedLayout

StackBox arranges children in a configurable orientation.

Supported as a configurable stack layout.

Overview

StackBox arranges children in a configurable orientation.

When to use

Use StackBox when the layout direction should be declared by property instead of choosing Row or Column.

Children

Supports normal children.

nui

children {
    Text ChildText {
        text: "THIS IS THE CHILD COMPONENT"
    }
}

Basic syntax

nui

StackBox ActionStack {
    orientation: vertical
    gap: 8

    children {
        Text ChildText {
            text: "THIS IS THE CHILD COMPONENT"
        }
    }
}

Supported properties

Property	Type	Required	Default	Description
`orientation`	enum	No	vertical	Stack direction.
`gap`	number	No	0	Space between children.
`width`	number	No	Auto	Desired width.
`height`	number	No	Auto	Desired height.
`padding`	margin	No	margin(0)	Inner padding.
`childPadding`	margin	No	margin(0)	Padding around children.
`backgroundColor`	color	No	Transparent	Optional background color.
`horizontalAlign`	enum	No	Inherited	Component horizontal alignment.
`verticalAlign`	enum	No	Inherited	Component vertical alignment.
`contentHorizontalAlign`	enum	No	Inherited	Child horizontal alignment.
`contentVerticalAlign`	enum	No	Inherited	Child vertical alignment.
`opacity`	number	No	1	Render opacity.
`layer`	integer	No	Context default	Layer order inside layered parents.
`visible`	bool	No	true	Visibility flag.

Contextual properties

Contextual property rules

StackBox may receive stack, canvas, grid, wrap, or ExpandableArea slot properties only when it is authored as a direct child of the matching parent. Children of StackBox may use fill or auto. See section 7.

Full syntax example

nui

StackBox ActionStack {
    orientation: vertical
    gap: 8
    width: 320
    height: 240
    padding: margin(10)
    childPadding: margin(2)
    backgroundColor: "#0F172A"
    horizontalAlign: fill
    verticalAlign: top
    contentHorizontalAlign: fill
    contentVerticalAlign: top
    opacity: 1
    layer: 1
    visible: true

    children {
        Text ChildText {
            text: "THIS IS THE CHILD COMPONENT"
        }
    }
}

Limitations

Prefer Row or Column when the direction is fixed and should read clearly in source.