LineaUI.Components.Popover (linea_ui v0.1.1)

Copy Markdown View Source

LineOne's popover: a white card with an arrow next to its trigger, for more than a tooltip holds (text, tags, people, a small form).

<.popover id="lesson">
  <:trigger><.button color="primary">Lessons</.button></:trigger>
  <:title>Group Lesson</:title>
  <p class="mt-2">Lorem ipsum dolor sit amet.</p>
</.popover>

<.popover id="john" trigger_on="hover" placement="top" class="w-48 px-4 py-5 text-center">
  <:trigger><div class="avatar size-8">…</div></:trigger>
  …
</.popover>

The default placement is LineOne's right-start, falling back to the bottom and the top when there is no room. It opens and closes from the browser (LineaUI.toggle("lesson")), from the server (LineaUI.close(socket, "lesson")) or from open; a click outside and Esc close it and on_close runs however it closed.

Summary

Functions

popover(assigns)

Renders a popover.

Functions

popover(assigns)

Renders a popover.

Events: on_open and on_close push %{"id" => id} when they are event names.

Attributes

  • id (:string) (required)
  • open (:boolean) - Defaults to false.
  • placement (:string) - Defaults to "right-start". Must be one of "bottom-start", "bottom", "bottom-end", "top-start", "top", "top-end", "left-start", "left", "left-end", "right-start", "right", or "right-end".
  • fallbacks (:list) - The sides tried, in order, when the placement has no room. Defaults to ["bottom", "top"].
  • offset (:integer) - Pixels between the trigger and the card. Defaults to 12.
  • trigger_on (:string) - Defaults to "click". Must be one of "click", or "hover".
  • arrow (:boolean) - Defaults to true.
  • on_open (:any) - An event name or a %JS{}. Defaults to nil.
  • on_close (:any) - An event name or a %JS{}. Defaults to nil.
  • target (:any) - The phx-target of on_open / on_close events. Defaults to nil.
  • class (:any) - Merged into the card (max-w-xs, w-72 p-3...). Defaults to nil.
  • Global attributes are accepted.

Slots

  • trigger (required)
  • title - LineOne's card title.
  • inner_block