Skip to content

Popover

Popover opens a Menu next to an element. A press anywhere else closes it.

Usage

Call Components.Popover with a scope and a table of properties:

local open = scope:Value(false)
local button = C.Button(scope, { Text = "Options", OnClick = function() open:set(true) end })

C.Popover(scope, {
    Layer = overlayLayer,
    Target = button,
    Open = open,
    Placement = "Bottom",
    Items = {
        { Text = "Rename", Icon = "pencil" },
        { Text = "Delete", Color = "error" },
    },
    OnClose = function()
        open:set(false)
    end,
})

Properties

Name Type Required Default Description
Theme ThemeRef ❌ The contextual theme Theme to use for this component instead of the one from Theme.Provide.
ZIndex UsedAs<number> ❌ - Z index of the component.
Open UsedAs<boolean> ❌ - Whether the popover is shown. Follows the state you pass.
Target Instance ❌ - The element the popover is placed next to.
Placement "Bottom" \| "Top" \| "Left" \| "Right" ❌ "Bottom" Preferred side of the target: "Bottom", "Top", "Left" or "Right".
Items { any } ❌ - Menu rows. See MenuButton.
Sections { MenuSectionProps } ❌ - Groups of rows. See MenuSection.
MaxHeight number ❌ - Largest height in pixels of the menu. It scrolls past that.
Children any ❌ - Menu content built from MenuSection and MenuButton.
Width number ❌ 240 Width of the popover in pixels.

Callbacks

Name Description
OnClose: () -> () Runs when the user presses outside the popover, or an item that closes it.

See also