NUI / Components / Layout

Overlay

ImplementedLayout

Overlay layers multiple children in the same space.

Supported as a layered child container.

Overview

Overlay layers multiple children in the same space.

When to use

Badges over images.
Text over backgrounds.
Stacked visual effects.
Layered HUD elements.

Children

Supports normal children.

nui

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

Basic syntax

nui

Overlay BadgeOverlay {
    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.
`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

Overlay 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

Overlay BadgeOverlay {
    width: 320
    height: 180
    padding: margin(8)
    childPadding: margin(4)
    backgroundColor: "#00000066"
    horizontalAlign: fill
    verticalAlign: fill
    contentHorizontalAlign: center
    contentVerticalAlign: center
    opacity: 1
    layer: 1
    visible: true

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

Limitations

Overlay does not use gap; child spacing should be handled on the child components.