Skip to content

UI.PopupWrapper

Name Mandatory Description Default Type
⬅️ Input The value that will be passed to the Widget shard(s) of the popup. Any
Output ➡️ The output of this shard will be its input. Any
MinWidth No The minimum width of the popup that should appear below or above the button. By default, it is always at least as wide as the button. none FloatNone
AboveOrBelow No Whether the location of the popup should be above or below the button. none PopupLocation
ID No An optional ID value to make the popup unique if the label text collides. none StringVar(String)None
Widget No The shard(s) to execute that should contain a widget that supports having this popup generated for it upon being clicked. none NoneShard[Shard]
Contents No The shards to execute and render inside the popup ui when the button is pressed. none NoneShard[Shard]

Wraps a button with a popup that can act as a drop-down menu or suggestion menu.

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
; Single PopupWrapper with Button widget and contents
GFX.MainWindow(
  Contents: {
    Once({
      GFX.DrawQueue >= ui-draw-queue
      GFX.UIPass(ui-draw-queue) >> render-steps
    })
    UI(
      UI.CentralPanel({
        UI.PopupWrapper(
          Widget: {
            UI.Button(
              Label: "Send message"
              Action: {
                "Message sent!" | Log
              }
            )
          }
          Contents: {
            UI.Button(
              Label: "Receive message"
              Action: {
                "Message received!" | Log
              }
            )
          }
        )
        UI.PopupWrapper(
          Widget: {
            UI.Button(
              Label: "Send message"
              Action: {
                "Message sent!" | Log
              }
            )
          }
          Contents: {
            UI.Button(
              Label: "Receive message"
              Action: {
                "Message received!" | Log
              }
            )
          }
        )
      })
    ) | 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 31 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
; Single PopupWrapper with ImageButton widget and contents
GFX.MainWindow(
  Contents: {
    Once({
      GFX.DrawQueue >= ui-draw-queue
      GFX.UIPass(ui-draw-queue) >> render-steps
    })
    UI(
      UI.CentralPanel({
        Once({
          LoadImage("../../assets/ShardsLogo.png") = image
        })
        UI.PopupWrapper(
          Widget: {
            image | UI.ImageButton(
              Scale: @f2(0.1)
              Action: {
                "Message sent!" | Log
              }
            )
          }
          Contents: {
            image | UI.ImageButton(
              Scale: @f2(0.1)
              Action: {
                "Message received!" | Log
              }
            )
          }
        )


      })
    ) | 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 30 commandBuffers at release (0 released, 0 kept)
[warning] Context has 4 buffers at release (2 released, 4 kept)
[warning] Context has 6 textures at release (1 released, 6 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
; Double PopupWrapper with mix of Button and ImageButton widget and contents
GFX.MainWindow(
  Contents: {
    Once({
      GFX.DrawQueue >= ui-draw-queue
      GFX.UIPass(ui-draw-queue) >> render-steps
    })
    UI(
      UI.CentralPanel({
        Once({
          LoadImage("../../assets/ShardsLogo.png") = image
        })
        UI.PopupWrapper(
          MinWidth: 200.0
          Widget: {
            image | UI.ImageButton(
              Scale: @f2(0.1)
              Action: {
                "Message sent!" | Log
              }
            )
          }
          Contents: {
            UI.Button(
              Label: "Receive message"
              Action: {
                "Message received!" | Log
              }
            )
          }
        )
        UI.PopupWrapper(
          MinWidth: 300.0 ; Changes the minimum width of the popup to be 200.0 instead of the width of the button
          AboveOrBelow: PopupLocation::Above
          Widget: {
            UI.Button(
              Label: "Send message"
              Action: {
                "Message sent!" | Log
              }
            )
          }
          Contents: {
            image | UI.ImageButton(
              Scale: @f2(0.1)
              Action: {
                "Message received!" | Log
              }
            )
            UI.Button(
              Label: "Receive message"
              Action: {
                "Message received!" | Log
              }
            )
          }
        )
      })
    ) | 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 30 commandBuffers at release (0 released, 0 kept)
[warning] Context has 6 buffers at release (2 released, 6 kept)
[warning] Context has 6 textures at release (1 released, 6 kept)