Skip to content

UI.Layout

Name Mandatory Description Default Type
⬅️ Input Not used. Any
Output ➡️ Passthrough the input. Any
Contents No The UI contents. none NoneShard[Shard]
Class No The Layout class defining all layout options. none Var(Object)
MinSize No Minimum reserved space for the UI. Overridden by FillWidth and FillHeight. none Float2Var(Float2)None
MaxSize No Maximum reserved space for the UI. Overridden by FillWidth and FillHeight. none Float2Var(Float2)None
FillWidth No Whether the layout should occupy the full width. none BoolVar(Bool)None
FillHeight No Whether the layout should occupy the full height. none BoolVar(Bool)None

Versatile layout with numerous customization options.

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
@wire(ui-wire {
  UI.Window(
    Title: "UI Layout"
    Position: @f2(0 0)
    Anchor: Anchor::Center
    Width: 700
    Height: 400
    Contents: {
      Once({
        UI.LayoutClass(
          MainDirection: LayoutDirection::BottomUp
          MainWrap: true
          CrossAlign: LayoutAlign::Center
          CrossJustify: true
        ) = bottom-up-layout-class
        false >= checked
        1 >= choice
      })

      UI.Layout(
        Class: bottom-up-layout-class
        Contents: {
          "Wrapping text followed by example widgets:" | UI.Label
          UI.Checkbox(
            Label: "checkbox"
            Variable: checked
          )
          UI.RadioButton(
            Label: "radio"
            Variable: choice
            Value: 1
          )
          UI.Button(
            Label: "button"
            Action: Msg("Clicked")
          )
        }
      )
    }
  )
} 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
53
54
55
56
57
@wire(ui-wire {
  UI.Window(
    Title: "UI Layout"
    Position: @f2(0 0)
    Anchor: Anchor::Center
    Width: 700
    Height: 400
    Contents: {
      Once({
        UI.LayoutClass(
          MainDirection: LayoutDirection::RightToLeft
          MinSize: @f2(200 200)
          ; note that some direction layouts may try to expand to max size and this max size will increase if the contents are too large
          ; also, without max size, the layout will try to expand to max size of the window, so for shrink to fit, may want to set to (0 0)
          MaxSize: @f2(600 600)
          ; FillHeight: true
          ; FillWidth: true
          Disabled: false
          Frame: LayoutFrame::Widgets
          EnableHorizontalScrollBar: true
          EnableVerticalScrollBar: true
          ScrollAreaMinWidth: 200.0
          ScrollAreaMaxWidth: 200.0
        ) = scroll-frame-layout-class
        false >= checked
        1 >= choice
      })

      UI.Layout(
        Class: scroll-frame-layout-class
        ; individual override for size for each layout is also possible
        ; MinSize: @f2(200 200)
        ; MaxSize: @f2(600 600)
        ; FillHeight: true
        ; FillWidth: true
        Contents: {
          "Wrapping text followed by example widgets:" | UI.Label
          UI.Checkbox(
            Label: "checkbox"
            Variable: checked
          )
          UI.RadioButton(
            Label: "radio"
            Variable: choice
            Value: 1
          )
          UI.Button(
            Label: "button"
            Action: Msg("Clicked")
          )
        }
      )
    }
  )
} 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
@wire(ui-wire {
  UI.Window(
    Title: "UI Layout"
    Position: @f2(0 0)
    Anchor: Anchor::Center
    Width: 700
    Height: 400
    Contents: {
      Once({
        UI.LayoutClass(
        MainDirection: LayoutDirection::LeftToRight) = left-to-right-layout-class
        UI.LayoutClass(
        MainDirection: LayoutDirection::TopDown) = top-down-layout-class
      })

      UI.Layout(
        Class: left-to-right-layout-class
        MaxSize: @f2(0 0) ; use as small area as possible, this vertical separator needs this to act like egui vertical separator
        Contents: {
          "Hello" | UI.Label
          UI.Separator
          "World" | UI.Label
        }
      )
      UI.Layout(
        Class: top-down-layout-class
        Contents: {
          "Hello" | UI.Label
          UI.Separator
          "World" | UI.Label
        }
      )
    }
  )
} Looped: true)

{ui-behavior: ui-wire}