This component is a composition of 2 key components:
- LumexPopover: A component representing the popover that displays additional content within a floating container.
- LumexPopoverContent: A component representing the content of the popover.
The popover component provides a simple floating
container for contextual information or actions.
<LumexPopover>
<LumexPopoverTrigger>
<LumexButton>Open Popover</LumexButton>
</LumexPopoverTrigger>
<LumexPopoverContent>
<div class="px-1 py-2">
<div class="text-small font-bold">Oh, hi there!</div>
<div class="text-tiny">I am the popover content</div>
</div>
</LumexPopoverContent>
</LumexPopover>
You can customize the background color of the popover to
match your theme or highlight important content.
@using LumexUI.Services
@foreach( var color in Enum.GetValues<ThemeColor>()[1..] )
{
<LumexPopover Color="@color">
<LumexPopoverTrigger>
<LumexButton>@color.ToString()</LumexButton>
</LumexPopoverTrigger>
<LumexPopoverContent>
<div class="px-1 py-2">
<div class="text-small font-bold">Oh, hi there!</div>
<div class="text-tiny">I am the popover content</div>
</div>
</LumexPopoverContent>
</LumexPopover>
}
Adjust the font size of the popover to scale
text for readability and emphasis.
@using LumexUI.Services
@foreach( var size in Enum.GetValues<Size>() )
{
<LumexPopover Size="@size">
<LumexPopoverTrigger>
<LumexButton Color="@ThemeColor.Primary"
Variant="@Variant.Flat">
@size.ToString()
</LumexButton>
</LumexPopoverTrigger>
<LumexPopoverContent>
<div class="px-1 py-2">
<div class="text-small font-bold">Oh, hi there!</div>
<div>I am the popover content</div>
</div>
</LumexPopoverContent>
</LumexPopover>
}
The Radius parameter allows you to set the border radius,
creating rounded or square corners for the popover.
@using LumexUI.Services
@foreach( var radius in Enum.GetValues<Radius>() )
{
<LumexPopover Radius="@radius">
<LumexPopoverTrigger>
<LumexButton Color="@ThemeColor.Secondary"
Variant="@Variant.Flat">
@radius.ToString()
</LumexButton>
</LumexPopoverTrigger>
<LumexPopoverContent>
<div class="px-1 py-2">
<div class="text-small font-bold">Oh, hi there!</div>
<div class="text-tiny">I am the popover content</div>
</div>
</LumexPopoverContent>
</LumexPopover>
}
Adjust a shadow effect to the popover for a
more elevated, visually distinct appearance.
@using LumexUI.Services
@foreach( var shadow in Enum.GetValues<Shadow>() )
{
<LumexPopover Shadow="@shadow">
<LumexPopoverTrigger>
<LumexButton Color="@ThemeColor.Success"
Variant="@Variant.Flat">
@shadow.ToString()
</LumexButton>
</LumexPopoverTrigger>
<LumexPopoverContent>
<div class="px-1 py-2">
<div class="text-small font-bold">Oh, hi there!</div>
<div>I am the popover content</div>
</div>
</LumexPopoverContent>
</LumexPopover>
}
Specify the position of the popover relative to the trigger element,
with options like Right, Left, TopStart, and more.
@using LumexUI.Services
<div class="flex flex-wrap md:inline-grid md:grid-cols-3 gap-4">
@foreach( var placement in Enum.GetValues<PopoverPlacement>() )
{
<LumexPopover Placement="@placement">
<LumexPopoverTrigger>
<LumexButton Color="@ThemeColor.Danger"
Variant="@Variant.Flat"
Class="capitalize">
@placement.ToDescription().Replace( "-", " " )
</LumexButton>
</LumexPopoverTrigger>
<LumexPopoverContent>
<div class="px-1 py-2">
<div class="text-small font-bold">Oh, hi there!</div>
<div class="text-tiny">I am the popover content</div>
</div>
</LumexPopoverContent>
</LumexPopover>
}
</div>
Set an offset to adjust the distance between the
popover and its trigger element for finer control over placement.
@using LumexUI.Services
<LumexPopover Offset="16">
<LumexPopoverTrigger>
<LumexButton>Open Popover</LumexButton>
</LumexPopoverTrigger>
<LumexPopoverContent>
<div class="px-1 py-2">
<div class="text-small font-bold">Oh, hi there!</div>
<div class="text-tiny">I am the popover content</div>
</div>
</LumexPopoverContent>
</LumexPopover>
Enable an arrow on the popover to visually connect it to
its trigger element, making the source of information clearer.
@using LumexUI.Services
<LumexPopover ShowArrow="@true">
<LumexPopoverTrigger>
<LumexButton>Open Popover</LumexButton>
</LumexPopoverTrigger>
<LumexPopoverContent>
<div class="px-1 py-2">
<div class="text-small font-bold">Oh, hi there!</div>
<div class="text-tiny">I am the popover content</div>
</div>
</LumexPopoverContent>
</LumexPopover>
This component supports named slots, which allow custom
styles to be applied to specific parts of the component:
- Base: The overall container of the popover.
- Content: The container of the popover content.
- Arrow: The arrow element that connects the popover to its trigger element.
You can customize the component(s) by passing
any Tailwind CSS classes to the following component parameters:
Popover
Class: The CSS class name that styles the wrapper of the popover.Classes: The CSS class names for the popover slots that style entire popover.
@using LumexUI.Services
<LumexPopover Offset="16"
ShowArrow="@true"
Placement="@PopoverPlacement.Right"
Classes="@_classes">
<LumexPopoverTrigger>
<LumexButton>Open Popover</LumexButton>
</LumexPopoverTrigger>
<LumexPopoverContent>
<div class="px-1 py-2">
<h3 class="text-small font-bold">Oh, hi there!</h3>
<div class="text-tiny">I am the popover content</div>
</div>
</LumexPopoverContent>
</LumexPopover>
@code {
private PopoverSlots _classes = new()
{
Content = ElementClass.Empty()
.Add( "py-3 px-4 border border-default-200" )
.Add( "bg-linear-to-br from-white to-default-200" )
.Add( "dark:from-default-100 dark:to-default-50" )
.ToString(),
Arrow = "bg-default-200"
};
}
See the API references below for a complete guide to all the
parameters available for the components mentioned here.