NUI / Components / Layout

WrapBox

ImplementedLayout

WrapBox lays out children in sequence and wraps to a new line when needed.

Supported as a wrapping flow layout.

Overview

WrapBox lays out children in sequence and wraps to a new line when needed.

When to use

Chips.
Tag lists.
Responsive icon rows.
Compact action groups.
Wrapping inventory-like displays.

Children

Supports normal children.

nui

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

Basic syntax

nui

WrapBox Tags {
    gap: 6

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

Supported properties

Property	Type	Required	Default	Description
`orientation`	enum	No	horizontal	Wrap direction.
`wrapSize`	number	No	Unset	Size threshold before wrapping.
`gap`	number	No	0	Space between children.
`innerPadding`	margin	No	margin(0)	Padding between wrapped entries.
`lineAlignment`	enum	No	Default	Alignment of wrapped lines.
`width`	number	No	Auto	Desired width.
`height`	number	No	Auto	Desired height.
`padding`	margin	No	margin(0)	Inner padding.
`backgroundColor`	color	No	Transparent	Optional background color.
`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

Children of WrapBox may use wrap slot properties. WrapBox itself may receive stack, canvas, grid, or ExpandableArea slot properties only when it is a child of the matching parent. See section 7.

Full syntax example

nui

WrapBox Tags {
    orientation: horizontal
    wrapSize: 320
    gap: 6
    innerPadding: margin(4)
    lineAlignment: left
    width: 360
    height: 160
    padding: margin(8)
    backgroundColor: "#0F172A"
    opacity: 1
    layer: 1
    visible: true

    children {
        Text ChildText {
            text: "THIS IS THE CHILD COMPONENT"
            fillEmptySpace: false
            fillSpanWhenLessThan: 0
            forceNewLine: false
        }
    }
}

Limitations

Wrap slot properties are valid only on direct children of WrapBox.