NUI / Components / Layout

UniformGridPanel

ImplementedLayout

UniformGridPanel places children in a grid where cells share a uniform size.

Supported as an evenly sized grid layout container.

Overview

UniformGridPanel places children in a grid where cells share a uniform size.

When to use

Inventory slots.
Icon grids.
Fixed tiles.
Regular menu grids.

Children

Supports normal children.

nui

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

Basic syntax

nui

UniformGridPanel InventoryGrid {
    minDesiredSlotWidth: 64
    minDesiredSlotHeight: 64

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

Supported properties

Property	Type	Required	Default	Description
`minDesiredSlotWidth`	number	No	Unset	Minimum grid slot width.
`minDesiredSlotHeight`	number	No	Unset	Minimum grid slot height.
`slotPadding`	margin	No	margin(0)	Padding around grid slots.
`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.
`horizontalAlign`	enum	No	Inherited	Component horizontal alignment.
`verticalAlign`	enum	No	Inherited	Component 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

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

Full syntax example

nui

UniformGridPanel InventoryGrid {
    minDesiredSlotWidth: 64
    minDesiredSlotHeight: 64
    slotPadding: margin(4)
    width: 360
    height: 240
    padding: margin(8)
    backgroundColor: "#0F172A"
    horizontalAlign: fill
    verticalAlign: top
    opacity: 1
    layer: 1
    visible: true

    children {
        Text ChildText {
            text: "THIS IS THE CHILD COMPONENT"
            row: 0
            column: 0
            rowSpan: 1
            columnSpan: 1
            nudge: vec2(0, 0)
        }
    }
}

Limitations

rowFill and columnFill are GridPanel properties, not normal UniformGridPanel properties.
Do not use gap on UniformGridPanel.