| 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] 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] 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] Context has 6 buffers at release (2 released, 6 kept)
[warning] Context has 6 textures at release (1 released, 6 kept)