Lumeo

Popover

Displays rich content in a portal, triggered by a button.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<Popover />

Pick a value to see it applied live.

Pick a value to see it applied live.

API Reference

Popover

Property Type Default Description
Open bool false Controls whether the popover is open. Use with @bind-Open for two-way binding.
OpenChanged EventCallback<bool> Callback invoked when the open state changes.
IsOpen bool false Obsolete alias for Open; will be removed in a future release.
IsOpenChanged EventCallback<bool> Obsolete alias for OpenChanged; will be removed in a future release.

PopoverContent

Property Type Default Description
Side Lumeo.Side Bottom Which side of the trigger the popover appears on. Values: Top, Bottom, Left, Right.
Align Lumeo.Align Center Horizontal alignment of the popover relative to its trigger. Values: Start, Center, End.
ShowArrow bool false Renders a small arrow pointing back at the trigger.
FocusOnOpen bool true When true, focus moves into the popover surface on open. Set to false when the trigger is a typeable control (e.g. a keyboard-input trigger) that must keep focus while the popover opens.

PopoverTrigger

Property Type Default Description
AsChild bool false Renders no wrapper element and instead cascades a trigger slot that a single cooperating child (a Lumeo Button, or a manual ChildContentSlot splat) folds onto its own root element.
ChildContentSlot RenderFragment<TriggerSlot>? null Escape hatch for AsChild with arbitrary non-Lumeo markup: receives the trigger slot so the consumer can splat its attributes and click/keyboard handlers onto their own single element.
SuppressActivationKeys bool false When true, Enter/Space keydowns that bubble up from a ChildContent that owns its own interactive control (e.g. a typeable input) do not also toggle this wrapper. Set this when the child already handles Enter/Space itself, to avoid a double-toggle.