Skip to content
OVERLAYS · FREE

Popover

A floating panel for extra detail, close at hand.

A floating panel for extra detail, close at hand: opened by an activator, closed with Escape or a click outside.

Why it helps

  • Close at hand
  • Escape and outside click
  • Stays in the viewport

Where it fits

  • Details
  • Filters
  • Help
Popover control in a RayCraft page

Example

<Popover @bind-Open="_open">
    <Activator><Button Variant="Variant.Outlined">Settings</Button></Activator>
    <ChildContent>
        <Stack Direction="StackDirection.Column">
            <Switch @bind-Value="_notify" Label="Notifications" />
            <Button Size="Size.Small" OnClick="() => _open = false">Done</Button>
        </Stack>
    </ChildContent>
</Popover>

@code {
    private bool _open;
    private bool _notify = true;
}

A short fragment. Add @using RayCraft.Blazor.Components to your page and use an interactive render mode.

Included in RayCraft Free. Working examples are in the GitHub repository (MIT); it holds example and demo code, not the library code.

All controls ยท Documentation