NUI / Components / Layout

CanvasPanel

ImplementedLayout

CanvasPanel places children using canvas slot properties such as anchors, offsets, and alignment.

Supported as an absolute-positioning layout container.

Overview

CanvasPanel places children using canvas slot properties such as anchors, offsets, and alignment.

When to use

HUD placement.
Anchored screen regions.
Absolute overlay positioning.
Custom layouts that should not flow like rows or columns.

Children

Supports normal children.

nui

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

Basic syntax

nui

CanvasPanel HudCanvas {
    children {
        Text ChildText {
            text: "THIS IS THE CHILD COMPONENT"
            anchorMin: vec2(0, 0)
            anchorMax: vec2(0, 0)
            offsetLeft: 24
            offsetTop: 24
        }
    }
}

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.
`backgroundColor`	color	No	Transparent	Optional background color.
`clip`	bool	No	false	Clips child rendering.
`overflow`	enum	No	Default	Overflow behavior.
`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 CanvasPanel may use canvas slot properties. CanvasPanel itself may receive stack, grid, wrap, or ExpandableArea slot properties only when it is a child of the matching parent. See section 7.

Full syntax example

nui

CanvasPanel HudCanvas {
    width: 1280
    height: 720
    padding: margin(0)
    backgroundColor: "#00000000"
    clip: true
    overflow: clip
    opacity: 1
    layer: 0
    visible: true

    children {
        Text ChildText {
            text: "THIS IS THE CHILD COMPONENT"
            anchorMin: vec2(0, 0)
            anchorMax: vec2(0, 0)
            offsetLeft: 24
            offsetTop: 24
            offsetRight: 240
            offsetBottom: 48
            alignment: vec2(0, 0)
        }
    }
}

Limitations

Canvas slot properties are valid only on direct children of CanvasPanel.
Do not use gap on CanvasPanel.