Skip to content

UI.Area

Name Mandatory Description Default Type
⬅️ Input The input of the shard, if any Any
Output ➡️ The resulting output of the shard Any
Contents No The UI contents. none NoneShard[Shard]
Position No Defines the position of the UI element. If 'Anchor' is set, this acts as a relative offset (X/Y). Accepts fixed and variable float2 types. none Float2Var(Float2)
Pivot No Specifies the pivot point of the UI element. Can be any predefined anchor type or variable. none AnchorVar(Anchor)
Anchor No Determines the side of the screen where the UI element is anchored. Accepts predefined anchor types or variables. none AnchorVar(Anchor)
Order No Sets the rendering layer for the UI element. The default layer is 'background'. none Order
Constrain No Constrains the UI element to remain within the screen boundaries. Accepts a boolean value. false Bool
ForcedSize No Force area to be the given size, will update the area state none NoneFloat2Var(Float2)

Places UI element at a specific position.

Examples

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
@wire(ui-wire {
  ; The default order for a window is Order::Middle, and depending on focus, this window,
  ; or the Area with Order::Middle will be drawn on top of the other.
  UI.Window(
    Title: "Greetings"
    Flags: WindowFlags::NoCollapse
    Contents: {
      "Hello shards!" | UI.Label
    }
  )
  UI.Area(
    Anchor: Anchor::TopLeft
    ; Order: Order::Background ; This is the default for UI.Area
    Contents: {
      "Lowest: Background" | UI.Label
    }
  )
  UI.Area(
    Anchor: Anchor::Left
    Order: Order::PanelResizeLine
    Contents: {
      "2nd Lowest: PanelResizeLine" | UI.Label
    }
  )
  UI.Area(
    Anchor: Anchor::BottomLeft
    Order: Order::Middle
    Contents: {
      "3rd Lowest: Middle" | UI.Label
    }
  )
  UI.Area(
    Anchor: Anchor::TopRight
    Order: Order::Foreground
    Contents: {
      "3rd Highest: Foreground" | UI.Label(Wrap: false)
    }
  )
  UI.Area(
    Anchor: Anchor::Right
    Order: Order::Tooltip
    Contents: {
      "2nd Highest: Tooltip" | UI.Label(Wrap: false)
    }
  )
  UI.Area(
    Anchor: Anchor::BottomRight
    Order: Order::Debug
    Contents: {
      "Highest: Debug" | UI.Label(Wrap: false)
    }
  )
} Looped: true)

{ui-behavior: ui-wire}
 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
@wire(ui-wire {
  UI.Area(
    Anchor: Anchor::TopLeft
    Contents: {
      "TopLeft" | UI.Label
    }
  )
  UI.Area(
    Anchor: Anchor::Top
    Contents: {
      "Top" | UI.Label
    }
  )
  UI.Area(
    Anchor: Anchor::TopRight
    Contents: {
      "TopRight" | UI.Label(Wrap: false)
    }
  )
  UI.Area(
    Anchor: Anchor::Center
    Contents: {
      "Center" | UI.Label
    }
  )
  UI.Area(
    Anchor: Anchor::Right
    Contents: {
      "Right" | UI.Label
    }
  )
  UI.Area(
    Anchor: Anchor::BottomLeft
    Contents: {
      "BottomLeft" | UI.Label
    }
  )
  UI.Area(
    Anchor: Anchor::Bottom
    Contents: {
      "Bottom" | UI.Label
    }
  )
  UI.Area(
    Anchor: Anchor::BottomRight
    Contents: {
      "BottomRight" | UI.Label(Wrap: false)
    }
  )
} Looped: true)

{ui-behavior: ui-wire}