Skip to content

Overlays & Dialogs

Use a QuickGUI overlay for app-styled content, or a system dialog for file picking and alerts.

#Popover

Compose trigger, positioner, popup, and arrow parts. Store open on the view.

let popover = Popover::new("help-trigger", "help-popup", open)
    .side(AnchorSide::Bottom)
    .side_offset(8.0);
let mut root = popover.root().child(
    popover.trigger().on_click(toggle).child("Account"),
);
if popover.is_open() {
    root = root.child(popover.positioner().child(
        popover.popup().w(240.0).p(16.0).on_dismiss(dismiss).children([
            popover.title().child("Account"),
            popover.close("Close").on_click(dismiss).child("Done"),
        ]),
    ));
}
root

#Dialog

Dialog::new and Dialog::alert add a title, description, backdrop, and close control.

let dialog = Dialog::new("save", open);
dialog.root().child(dialog.title_with(text("Save changes")))

#System popover

SystemPopover opens a native child window, which can extend past the owner window’s edge.

#Native dialogs

cx.prompt("Save changes?", ["Save", "Cancel"]);
cx.prompt_for_paths(PathPromptOptions::new().files(true).multiple(true));