Overlays & Dialogs
Use a QuickGUI overlay for app-styled content, or a system dialog for file picking and alerts.
#Popover
A popover has a trigger and a popup. The side is a preference; placement flips if it would overflow.
func PopoverExample() *ui.Element {
popover := ui.NewPopover().Side("bottom").SideOffset(8)
return popover.Root().Children(
popover.Trigger().Child("Account"),
popover.Positioner().Child(
popover.Popup().Width(240).Padding(16).Children(
popover.Title().Child("Account"),
popover.Description().Child("Manage your account settings."),
popover.Close().Child("Done"),
),
),
)
}#Dialog
Build modal content under Portal. Title and Description name the dialog for accessibility. AlertDialog is for confirmations.
func DialogExample() *ui.Element {
dialog := ui.NewDialog()
return dialog.Root().Children(
dialog.Trigger().Child("Open dialog"),
dialog.Portal().Children(
dialog.Backdrop(),
dialog.Popup().Padding(20).Width(360).Children(
dialog.Title().Child("Confirm action"),
dialog.Description().Child("Review the details before continuing."),
dialog.Close().Child("Cancel"),
),
),
)
}#System popover
SystemPopover opens a native child window, which can extend past the owner window’s edge.
func SystemPopoverExample() *ui.Element {
popover := ui.NewSystemPopover()
return popover.Root().Children(
popover.Trigger().Child("Account"),
popover.Content(ui.PopoverContentProps{
Width: 240,
Height: 120,
Placement: "bottom-start",
}).Child("Account settings"),
)
}#Native dialogs
Capture the parent window while rendering, then pass it to the request. A canceled open panel sets Canceled: true.
func OpenFolderButton() *ui.Element {
window := native.CurrentWindow()
return ui.Button().Child("Open folder").OnClick(func() {
native.ShowOpenDialog(
native.OpenDialogOptions{
Window: window,
Title: "Open folder",
Properties: []string{"openDirectory"},
},
func(result native.OpenDialogResult, err error) {
if err == nil && !result.Canceled {
fmt.Println(result.FilePaths)
}
},
)
})
}