NUI / Components / Scroll, Lists & Data

ScrollBox

ImplementedScroll, Lists & Data

ScrollBox contains normal children and allows the content to scroll.

Supported as a scrollable child container.

Overview

ScrollBox contains normal children and allows the content to scroll.

When to use

Scrollable panels.
Long forms.
Vertical menus.
Content regions where children are authored manually.

Children

Supports normal children.

nui

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

Basic syntax

nui

ScrollBox ContentScroll {
    height: 320

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

Supported properties

Property	Type	Required	Default	Description
`orientation`	enum	No	vertical	Scroll direction.
`scrollOffset`	number	No	0	Initial scroll offset.
`scrollStep`	number	No	Default	Wheel or step scroll amount.
`scrollBarVisibility`	enum	No	auto	Scrollbar visibility.
`gap`	number	No	0	Space between children.
`viewportPadding`	number	No	0	Numeric padding inside viewport.
`width`	number	No	Auto	Desired width.
`height`	number	No	Auto	Desired height.
`padding`	margin	No	margin(0)	Outer padding.
`backgroundColor`	color	No	Transparent	Optional background color.
`clip`	bool	No	true	Clips scrolled content.
`opacity`	number	No	1	Render opacity.
`visible`	bool	No	true	Visibility flag.

Contextual properties

Contextual property rules

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

Full syntax example

nui

ScrollBox ContentScroll {
    orientation: vertical
    scrollOffset: 0
    scrollStep: 32
    scrollBarVisibility: auto
    gap: 8
    viewportPadding: 8
    width: 360
    height: 320
    padding: margin(4)
    backgroundColor: "#0F172A"
    clip: true
    opacity: 1
    visible: true

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

Limitations

Use ListView, TileView, TreeView, DynamicEntryBox, or ForEach when entries come from data instead of manually authored children.