NUI / Components / Layout

SizeBox

ImplementedLayout

SizeBox wraps exactly one child and applies explicit sizing constraints.

Supported as a one-child explicit size wrapper.

Overview

SizeBox wraps exactly one child and applies explicit sizing constraints.

When to use

Use SizeBox when a child should have fixed or bounded size independent of its content.

Children

Supports exactly one child.

nui

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

Basic syntax

nui

SizeBox FixedSize {
    width: 180
    height: 44

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

Supported properties

Property	Type	Required	Default	Description
`width`	number	No	Auto	Desired width.
`height`	number	No	Auto	Desired height.
`minWidth`	number	No	Unset	Minimum width.
`minHeight`	number	No	Unset	Minimum height.
`maxWidth`	number	No	Unset	Maximum width.
`maxHeight`	number	No	Unset	Maximum height.
`aspectRatio`	number	No	Unset	Target aspect ratio.
`minAspectRatio`	number	No	Unset	Minimum aspect ratio.
`maxAspectRatio`	number	No	Unset	Maximum aspect ratio.
`padding`	margin	No	margin(0)	Inner padding.
`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.
`layer`	integer	No	Context default	Layer order inside layered parents.
`visible`	bool	No	true	Visibility flag.

Contextual properties

Contextual property rules

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

Full syntax example

nui

SizeBox FixedSize {
    width: 180
    height: 44
    minWidth: 120
    minHeight: 36
    maxWidth: 240
    maxHeight: 80
    aspectRatio: 1.777
    minAspectRatio: 1.3
    maxAspectRatio: 2.0
    padding: margin(4)
    horizontalAlign: center
    verticalAlign: center
    contentHorizontalAlign: center
    contentVerticalAlign: center
    layer: 1
    visible: true

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

Limitations

SizeBox must contain exactly one child.