Packages
noora
0.77.2
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
lib/noora/popover.ex
defmodule Noora.Popover do
@moduledoc """
Renders a popover component with a trigger and customizable content.
## Example
```elixir
<.popover id="settings-popover">
<:trigger :let={attrs}>
<button {attrs}>Settings</button>
</:trigger>
<div>
<h3>Popover Content</h3>
<p>This is the content inside the popover.</p>
</div>
</.popover>
<.popover id="form-popover" placement="bottom-end">
<:trigger :let={attrs}>
<span {attrs}><.icon name="filter" /></span>
</:trigger>
<form phx-submit="save">
<.text_input name="name" label="Name" />
<.button type="submit" label="Save" />
</form>
</.popover>
```
"""
use Phoenix.Component
attr(:id, :string, required: true, doc: "Unique identifier for the popover")
attr(:modal, :boolean, default: false, doc: "Enables focus trapping and interaction blocking outside the popover")
attr(:auto_focus, :boolean, default: true, doc: "Automatically focuses first focusable element when opened")
attr(:close_on_interact_outside, :boolean, default: true, doc: "Controls whether clicking outside closes the popover")
attr(:close_on_escape, :boolean, default: true, doc: "Determines if pressing Escape closes the popover")
attr(:placement, :string,
default: "bottom",
values: ~w(top top-start top-end bottom bottom-start bottom-end),
doc: "Positioning placement: top, top-start, top-end, bottom, bottom-start, bottom-end"
)
attr(:on_open_change, :string, default: nil, doc: "Phoenix event to push when popover state changes")
attr(:rest, :global, doc: "Additional HTML attributes")
slot(:trigger, required: true, doc: "Trigger element for the popover")
slot(:inner_block, required: true, doc: "Content to be rendered inside the popover")
def popover(assigns) do
~H"""
<div
id={@id}
class="noora-popover"
phx-hook="NooraPopover"
data-modal={@modal}
data-auto-focus={@auto_focus}
data-close-on-interact-outside={@close_on_interact_outside}
data-close-on-escape={@close_on_escape}
data-positioning-placement={@placement}
data-on-open-change={@on_open_change}
{@rest}
>
{render_slot(@trigger, %{"data-part" => "trigger"})}
<div data-part="positioner">
<div data-part="content">
{render_slot(@inner_block)}
</div>
</div>
</div>
"""
end
end