Slot lines and components

Two kinds of line in a node's block do not set the node itself: an @slot line sets how the parent panel places it, and a + Class block sets an object attached to it.

The panel slot: @slot

A widget inside a panel — a parent whose container lays children out (a box, a grid, an overlay) — has a panel slot (UDreamPanelSlot): how the parent places it. @slot lines set it:

Widget Root {
    + HorizontalBox { Spacing = 8 }
    Text Label {
        Text = "Volume"
        @slot HorizontalAlignment = Fill
        @slot Padding = (0, 4, 0, 4)
    }
}

The distinction is worth reading twice: AnchorData.SizeDelta is the node's own rect, @slot SizeRule is the parent's arrangement of it. Move a node into another panel and its own lines stay; its @slot lines are what change.

The slot properties written most (the full list is UDreamPanelSlot):

A slot line on a node whose parent lays out no panel is DUI5003.

Several at once

Several slot lines go in a block, with the property syntax of a + block, several to a line:

Widget Root {
    + VerticalBox { }
    Text Note {
        Text = "Unsaved changes"
        @slot { SizeRule = Fill  Padding = (0, 8, 0, 0) }
    }
}

@fill and @fill 2

The two lines a box layout is mostly made of have a shorthand:

@fill stands alone on its line, or with its weight and nothing else:

Widget Root {
    + HorizontalBox { Spacing = 12 }
    Text Label {
        Text = "Master volume"
        @fill
    }
    Text Value {
        Text = "80 %"
        @fill 2
    }
}

Value gets twice the width of Label. One limit of the designer's write-back: giving @fill 2 a SizeRule other than Fill in the designer is a change the shorthand cannot hold, and is refused (DUI7004); see Designer write-back.

Components: + Class

+ Class { … } attaches a behaviour, a layout container or a layout-self object to the node, and its block sets that object's properties:

Widget Confirm {
    + UIButton { TransitionType = None }
    + VerticalBox { Spacing = 10  Padding = (24, 28, 24, 28) }
    Text Label { Text = "Confirm" }
}

The class is found by its name with the plugin's prefixes tried: VerticalBox finds the vertical box container, UIButton the button behaviour, Button too. A full /Script/Module.Class path works as well (/Script/DreamGUIControls.UIButton). A name that resolves to nothing a widget can carry — nothing at all, an abstract or a deprecated class — is DUI3006.

A layout-self object at work: a Spacer in the Fill slot of a vertical box takes the height the two bars leave:

VerticalBox Column {
    Image TopBar {
        Brush.TintColor = #3D7DD8
        @slot SizeRule = Auto
    }
    Widget Gap {
        + Spacer { Size = (32, 32) }
        @fill
    }
    Image BottomBar {
        Brush.TintColor = #3D7DD8
        @slot SizeRule = Auto
    }
}

One layout container per node

+ VerticalBox on a plain Widget and a node typed VerticalBox are two ways to write the same thing; the type is shorter. A second layout container is DUI5022:

VerticalBox Column {
    + HorizontalBox { }
}

What else a block holds

Beside properties, a behaviour's + block holds event routes and bindings, which resolve against that behaviour's events and properties. A layout container's properties cannot be bound (DUI5008).

class /Game/UI/WBP_Menu

Widget Root {
    + VerticalBox { Spacing = 8 }
    Widget Start {
        + UIButton { OnClick -> HandleStart }
        Text { Text = "Start" }
    }
}

How routes and bindings are written is in Bindings and routes. A style can carry + blocks and slot lines too, so that a kind of column is one name; see Styles and resources.