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
GFX.MainWindow(
  Contents: {
    Once({
      GFX.DrawQueue >= ui-draw-queue
      GFX.UIPass(ui-draw-queue) >> render-steps
      UI.LayoutClass(
      MainDirection: LayoutDirection::LeftToRight) >= left-to-right-layout-class
      UI.LayoutClass(
      MainDirection: LayoutDirection::TopDown) >= top-down-layout-class
    })
    UI(
      UI.CentralPanel({
        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
          }
        )
      })
    ) | UI.Render(ui-draw-queue)
    GFX.Render(Steps: render-steps)
  }
)


[warning] Missing downlevel flags: DownlevelFlags(VERTEX_AND_INSTANCE_INDEX_RESPECTS_RESPECTIVE_FIRST_VALUE_IN_INDIRECT_DRAW)
The underlying API or device in use does not support enough features to be a fully compliant implementation of WebGPU. A subset of the features can still be used. If you are running this program on native and not in a browser and wish to limit the features you use to the supported subset, call Adapter::downlevel_properties or Device::downlevel_properties to get a listing of the features the current platform supports.
[warning] DownlevelCapabilities {
    flags: DownlevelFlags(
        COMPUTE_SHADERS | FRAGMENT_WRITABLE_STORAGE | INDIRECT_EXECUTION | BASE_VERTEX | READ_ONLY_DEPTH_STENCIL | NON_POWER_OF_TWO_MIPMAPPED_TEXTURES | CUBE_ARRAY_TEXTURES | COMPARISON_SAMPLERS | INDEPENDENT_BLEND | VERTEX_STORAGE | ANISOTROPIC_FILTERING | FRAGMENT_STORAGE | MULTISAMPLED_SHADING | DEPTH_TEXTURE_AND_BUFFER_COPIES | WEBGPU_TEXTURE_FORMAT_SUPPORT | BUFFER_BINDINGS_NOT_16_BYTE_ALIGNED | UNRESTRICTED_INDEX_BUFFER | FULL_DRAW_INDEX_UINT32 | DEPTH_BIAS_CLAMP | VIEW_FORMATS | UNRESTRICTED_EXTERNAL_TEXTURE_COPIES | SURFACE_VIEW_FORMATS | NONBLOCKING_QUERY_RESOLVE,
    ),
    limits: DownlevelLimits,
    shader_model: Sm5,
}
[warning] Context has 56 commandBuffers at release (0 released, 0 kept)
[warning] Context has 2 buffers at release (2 released, 2 kept)
[warning] Context has 5 textures at release (1 released, 5 kept)
 

 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
GFX.MainWindow(
  Contents: {
    Once({
      GFX.DrawQueue >= ui-draw-queue
      GFX.UIPass(ui-draw-queue) >> render-steps
      UI.LayoutClass(
        MainDirection: LayoutDirection::BottomUp
        MainWrap: true
        CrossAlign: LayoutAlign::Center
        CrossJustify: true
      ) >= bottom-up-layout-class
      false >= checked
      1 >= choice
    })
    UI(
      UI.CentralPanel({
        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")
            )
          }
        )
      })
    ) | UI.Render(ui-draw-queue)
    GFX.Render(Steps: render-steps)
  }
)


[warning] Missing downlevel flags: DownlevelFlags(VERTEX_AND_INSTANCE_INDEX_RESPECTS_RESPECTIVE_FIRST_VALUE_IN_INDIRECT_DRAW)
The underlying API or device in use does not support enough features to be a fully compliant implementation of WebGPU. A subset of the features can still be used. If you are running this program on native and not in a browser and wish to limit the features you use to the supported subset, call Adapter::downlevel_properties or Device::downlevel_properties to get a listing of the features the current platform supports.
[warning] DownlevelCapabilities {
    flags: DownlevelFlags(
        COMPUTE_SHADERS | FRAGMENT_WRITABLE_STORAGE | INDIRECT_EXECUTION | BASE_VERTEX | READ_ONLY_DEPTH_STENCIL | NON_POWER_OF_TWO_MIPMAPPED_TEXTURES | CUBE_ARRAY_TEXTURES | COMPARISON_SAMPLERS | INDEPENDENT_BLEND | VERTEX_STORAGE | ANISOTROPIC_FILTERING | FRAGMENT_STORAGE | MULTISAMPLED_SHADING | DEPTH_TEXTURE_AND_BUFFER_COPIES | WEBGPU_TEXTURE_FORMAT_SUPPORT | BUFFER_BINDINGS_NOT_16_BYTE_ALIGNED | UNRESTRICTED_INDEX_BUFFER | FULL_DRAW_INDEX_UINT32 | DEPTH_BIAS_CLAMP | VIEW_FORMATS | UNRESTRICTED_EXTERNAL_TEXTURE_COPIES | SURFACE_VIEW_FORMATS | NONBLOCKING_QUERY_RESOLVE,
    ),
    limits: DownlevelLimits,
    shader_model: Sm5,
}
[warning] Context has 56 commandBuffers at release (0 released, 0 kept)
[warning] Context has 2 buffers at release (2 released, 2 kept)
[warning] Context has 5 textures at release (1 released, 5 kept)
 

 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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
GFX.MainWindow(
  Contents: {
    Once({
      GFX.DrawQueue >= ui-draw-queue
      GFX.UIPass(ui-draw-queue) >> render-steps
      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
        ; ScrollAreaAutoShrinkWidth: true ;; this is the default
        ; ScrollAreaAutoShrinkHeight: true ;; this is the default
        ; ScrollAreaEnableScrolling: false
        ; ScrollBarVisibility: ScrollVisibility::AlwaysVisible ;; note that this is the default. VisibleWhenNeeded may have some issues with scroll bar visibility
      ) >= scroll-frame-layout-class
      false >= checked
      1 >= choice
    })
    UI(
      UI.CentralPanel({
        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")
            )
          }
        )
        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")
            )
          }
        )
      })
    ) | UI.Render(ui-draw-queue)
    GFX.Render(Steps: render-steps)
  }
)


[warning] Missing downlevel flags: DownlevelFlags(VERTEX_AND_INSTANCE_INDEX_RESPECTS_RESPECTIVE_FIRST_VALUE_IN_INDIRECT_DRAW)
The underlying API or device in use does not support enough features to be a fully compliant implementation of WebGPU. A subset of the features can still be used. If you are running this program on native and not in a browser and wish to limit the features you use to the supported subset, call Adapter::downlevel_properties or Device::downlevel_properties to get a listing of the features the current platform supports.
[warning] DownlevelCapabilities {
    flags: DownlevelFlags(
        COMPUTE_SHADERS | FRAGMENT_WRITABLE_STORAGE | INDIRECT_EXECUTION | BASE_VERTEX | READ_ONLY_DEPTH_STENCIL | NON_POWER_OF_TWO_MIPMAPPED_TEXTURES | CUBE_ARRAY_TEXTURES | COMPARISON_SAMPLERS | INDEPENDENT_BLEND | VERTEX_STORAGE | ANISOTROPIC_FILTERING | FRAGMENT_STORAGE | MULTISAMPLED_SHADING | DEPTH_TEXTURE_AND_BUFFER_COPIES | WEBGPU_TEXTURE_FORMAT_SUPPORT | BUFFER_BINDINGS_NOT_16_BYTE_ALIGNED | UNRESTRICTED_INDEX_BUFFER | FULL_DRAW_INDEX_UINT32 | DEPTH_BIAS_CLAMP | VIEW_FORMATS | UNRESTRICTED_EXTERNAL_TEXTURE_COPIES | SURFACE_VIEW_FORMATS | NONBLOCKING_QUERY_RESOLVE,
    ),
    limits: DownlevelLimits,
    shader_model: Sm5,
}
[warning] Context has 56 commandBuffers at release (0 released, 0 kept)
[warning] Context has 8 buffers at release (3 released, 8 kept)
[warning] Context has 5 textures at release (1 released, 5 kept)