View Source SaladUI.Popover (SaladUI v1.0.0-beta.3)
Enhanced implementation of popover component from https://ui.shadcn.com/docs/components/popover
Example:
<.popover id="profile-popover">
<.popover_trigger>
<.button variant="outline">Open Popover</.button>
</.popover_trigger>
<.popover_content side="bottom" align="center">
<div class="p-4">
<h3 class="font-medium">Profile</h3>
<p class="mt-2">View and edit your profile details</p>
</div>
</.popover_content>
</.popover>
Summary
Functions
The main popover component that manages state and positioning.
The popover content that appears when triggered.
The trigger element that toggles the popover.
Functions
The main popover component that manages state and positioning.
Options
:id
- Required unique identifier for the popover.:open
- Whether the popover is initially open. Defaults tofalse
.:animation
- Whether to animate the popover. Defaults totrue
.:on-open
- Handler for popover open event.:on-close
- Handler for popover close event.:class
- Additional CSS classes.
Attributes
id
(:string
) (required) - Unique identifier for the popover.open
(:boolean
) - Whether the popover is initially open. Defaults tofalse
.portal-container
(:string
) - The portal container to render the popover in. Defaults tonil
.class
(:string
) - Defaults tonil
.on-open
(:any
) - Handler for popover open event. Defaults tonil
.on-close
(:any
) - Handler for popover close event. Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
The popover content that appears when triggered.
Options
:side
- Placement of the popover relative to the trigger (top, right, bottom, left). Defaults to"bottom"
.:align
- Alignment of the popover (start, center, end). Defaults to"center"
.:side-offset
- Distance from the trigger in pixels. Defaults to8
.:align-offset
- Offset along the alignment axis. Defaults to0
.:class
- Additional CSS classes.
Attributes
class
(:string
) - Defaults tonil
.side
(:string
) - Defaults to"bottom"
.align
(:string
) - Defaults to"center"
.side-offset
(:integer
) - Distance from the trigger in pixels. Defaults to8
.align-offset
(:integer
) - Offset along the alignment axis. Defaults to0
.- Global attributes are accepted.
Slots
inner_block
(required)
The trigger element that toggles the popover.
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)