NUI / Components / Layout

ExpandableArea

ImplementedLayout / Disclosure

ExpandableArea displays a header and an expandable body region.

Supported with named `Header` and `Body` child slots.

Overview

ExpandableArea displays a header and an expandable body region.

When to use

Collapsible sections.
Advanced settings.
Accordions.
Optional detail panels.

Children

Supports named slots.

nui

children {
    Text HeaderText {
        slot: "Header"
        text: "THIS IS THE CHILD COMPONENT"
    }

    Text BodyText {
        slot: "Body"
        text: "THIS IS THE CHILD COMPONENT"
    }
}

Basic syntax

nui

ExpandableArea Details {
    expanded: true

    children {
        Text HeaderText {
            slot: "Header"
            text: "Details"
        }

        Text BodyText {
            slot: "Body"
            text: "THIS IS THE CHILD COMPONENT"
        }
    }
}

Supported properties

Property	Type	Required	Default	Description
`expanded`	bool	No	false	Initial expanded state.
`maxBodyHeight`	number	No	Unset	Maximum body height.
`command`	string	No	Empty	Event Graph command for state changes.
`backgroundColor`	color	No	Transparent	Optional background color.
`padding`	margin	No	margin(0)	Inner padding.
`width`	number	No	Auto	Desired width.
`height`	number	No	Auto	Desired height.
`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 ExpandableArea must use slot: "Header" or slot: "Body". ExpandableArea itself may receive stack, canvas, grid, or wrap slot properties only when it is a child of the matching parent. See section 7.

Full syntax example

nui

ExpandableArea Details {
    expanded: true
    maxBodyHeight: 240
    command: "ToggleDetails"
    backgroundColor: "#111827"
    padding: margin(8)
    width: 360
    height: 180
    opacity: 1
    layer: 1
    visible: true

    children {
        Text HeaderText {
            slot: "Header"
            text: "Details"
        }

        Text BodyText {
            slot: "Body"
            text: "THIS IS THE CHILD COMPONENT"
        }
    }
}

Limitations

Current public syntax requires one Header child and one Body child.
Animated expansion should not be documented as production-ready.
Use command, not the legacy action alias, in public documentation.