Catalog Popovers

<.anchored>

ConnieUI.Popovers

HEEx 
<div class="flex h-72 w-xl justify-end">
  <div id="catalog-anchor" class="h-fit">
    <ConnieUI.Buttons.button size="sm" color="secondary">Collaborate</ConnieUI.Buttons.button>
  </div>
  <ConnieUI.Popovers.anchored close={JS.push("collaborate:close")} class="w-72 p-6" id="catalog-anchored" anchor_id="catalog-anchor" open label="Collaborate">
    <ConnieUI.Layouts.vstack gap="sm">
      <ConnieUI.Typography.heading level="h3">Collaboration Link</ConnieUI.Typography.heading>
      <ConnieUI.Typography.muted>Anyone with the link can ask for access.</ConnieUI.Typography.muted>
    </ConnieUI.Layouts.vstack>
  </ConnieUI.Popovers.anchored>
</div>

Variant matrix

Every combination of one or two attributes, side by side.

Controls

:string
:string

id of the element the panel opens under

closed, the panel is not rendered at all

:string

which of the panel's edges lines up with the anchor's

:string

names the dialog for a screen reader. Required, because a dialog with no name is announced as an unlabelled group and the reader is told nothing about what opened

Set by the example

close class

Docs

A dialog placed under an element elsewhere on the page. `anchor_id` names that element. It is read on the client rather than taken as a box, because only the client knows where anything is, and it is read again on every resize and scroll rather than once, because the anchor moves. `close` is required and is the panel's only way out. It runs on Escape and on a click outside, and a click on the anchor itself is deliberately not one of those: the anchor carries the control that opened the panel, so closing from here as well would close and reopen on the same click and leave the panel exactly as it was. The panel is `fixed` and starts hidden, and the hook owns its `style` from then on. Give it its width and padding through `class`; what goes inside is the caller's business. A panel taller than the room under its anchor is pushed up the screen until it fits, which on a phone puts it over the control that opened it. The hook sets `--anchored-space` on the panel to the height of that room, so a tall panel can cap itself there and scroll instead: `class="max-h-(--anchored-space) overflow-y-auto"`. <ConnieUI.Popovers.anchored id="collaborate-popover" anchor_id="collaborate-button" open={@collaborating?} label="Collaborate" close={JS.push("collaborate:close")} class="w-80 p-4" > … </ConnieUI.Popovers.anchored>
Attribute Type Default Description
id * :string
anchor_id * :string
id of the element the panel opens under
open :boolean false
closed, the panel is not rendered at all
placement :string "bottom-end"
which of the panel's edges lines up with the anchor's bottom-end | bottom-start
close * {:struct, Phoenix.LiveView.JS}
how the panel is dismissed. Required: it is the dialog's only way out
label * :string
names the dialog for a screen reader. Required, because a dialog with no name is announced as an unlabelled group and the reader is told nothing about what opened
class :any nil
the panel's own width, padding and surface
rest :global
Slot Slot attributes Description
inner_block *