Salad UI

Popover

The main popover component that manages state and positioning.

Read more Read less

Options

  • :id - Required unique identifier for the popover.
  • :open - Whether the popover is initially open. Defaults to false.
  • :animation - Whether to animate the popover. Defaults to true.
  • :on-open - Handler for popover open event.
  • :on-close - Handler for popover close event.
  • :class - Additional CSS classes.
Attribute Type Documentation Default Value
Required id * :string

Unique identifier for the popover
open :boolean

Whether the popover is initially open
false
portal-container :string

The portal container to render the popover in
class :string
on-open :any

Handler for popover open event
on-close :any

Handler for popover close event
rest :global
Required inner_block * :slot 
<.popover_trigger>
  <.button variant="outline">
    <div class="flex items-center gap-2">
      <.avatar class="h-6 w-6">
        <.avatar_fallback>JD</.avatar_fallback>
      </.avatar>
      <span>Profile</span>
    </div>
  </.button>
</.popover_trigger>
<.popover_content side="right" align="center" side-offset={8} class="w-80">
  <div class="flex flex-col gap-4 p-1">
    <div class="flex items-center gap-4">
      <.avatar class="h-10 w-10">
        <.avatar_image src="/images/placeholders/avatar.png" />
        <.avatar_fallback>JD</.avatar_fallback>
      </.avatar>
      <div class="flex flex-col">
        <h4 class="text-sm font-semibold">John Doe</h4>
        <p class="text-sm text-muted-foreground">john.doe@example.com</p>
      </div>
    </div>
    <div class="grid gap-2">
      <.button variant="outline" size="sm">View profile</.button>
      <.button variant="outline" size="sm">Settings</.button>
      <.button variant="outline" size="sm">Logout</.button>
    </div>
  </div>
</.popover_content>