Phlex Components
x
1
2
3
4
5
6
7
<div>
  <div data-controller="popover" data-popover-options-value="{"placement":"top"}">
    <div data-popover-target="trigger" class="inline-block w-full"><button type="button" class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground px-4 py-2 h-9 text-sm">Open Popover</button></div>
    <template data-popover-target="content">
      <div data-state="open" class="z-50 rounded-md border bg-background p-2 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 w-40"><a href="#" type="button" class="whitespace-nowrap items-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground px-4 py-2 h-9 text-sm block w-full justify-start pl-2"><svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 mr-2"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="10" r="3"></circle><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"></path></svg>Profile</a><a href="#" type="button" class="whitespace-nowrap items-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground px-4 py-2 h-9 text-sm block w-full justify-start pl-2"><svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 mr-2"><path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"></path><path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"></path><path d="M12 2v2"></path><path d="M12 22v-2"></path><path d="m17 20.66-1-1.73"></path><path d="M11 10.27 7 3.34"></path><path d="m20.66 17-1.73-1"></path><path d="m3.34 7 1.73 1"></path><path d="M14 12h8"></path><path d="M2 12h2"></path><path d="m20.66 7-1.73 1"></path><path d="m3.34 17 1.73-1"></path><path d="m17 3.34-1 1.73"></path><path d="m11 13.73-4 6.93"></path></svg>Settings</a><a href="#" type="button" class="whitespace-nowrap items-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground px-4 py-2 h-9 text-sm block w-full justify-start pl-2"><svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 mr-2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" x2="9" y1="12" y2="12"></line></svg>Logout</a></div>
    </template></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
render(TestView.new) do
  Popover(options: {placement:}) do
    PopoverTrigger(class: "w-full") do
      Button(variant: :outline) { "Open Popover" }
    end
    PopoverContent(class: "w-40") do
      Link(href: "#", variant: :ghost, class: "block w-full justify-start pl-2") do
        plain(helpers.lucide_icon("circle-user", class: "w-4 h-4 mr-2"))
        plain("Profile")
      end
      Link(href: "#", variant: :ghost, class: "block w-full justify-start pl-2") do
        plain(helpers.lucide_icon("cog", class: "w-4 h-4 mr-2"))
        plain("Settings")
      end
      Link(href: "#", variant: :ghost, class: "block w-full justify-start pl-2") do
        plain(helpers.lucide_icon("log-out", class: "w-4 h-4 mr-2"))
        plain("Logout")
      end
    end
  end
end

Default Popover

Param Description Input

—