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. |
| Class | string? | null | Merged onto the anchor wrapper (relative inline-block), a real element that Radix's Popover.Root does not have: the content is positioned against it and it shrinks to its content, so a full-width trigger needs Class="w-full" here together with PopoverTrigger AsChild. In a button group the wrapper, not the trigger, is the direct child, so put the group's edge classes on the trigger itself. |
| 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. |
| SideOffset | int | 4 | Gap between the trigger and the popover in pixels (Radix's sideOffset). |
| AlignOffset | int | 0 | Shift along the alignment axis in pixels (Radix's alignOffset): a bottom or top placement moves toward the end, a left or right placement down. |
| 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. |
| FocusTargetId | string? | null | Id of the element inside the popover that receives initial focus instead of the content wrapper: a search field, a calendar day, the first option. Ignored when FocusOnOpen is false. |
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. |