LineaUI.Components.Drawer (linea_ui v0.1.1)

Copy Markdown View Source

LineOne's drawer: a full-height panel that slides in from the left or the right over a dark backdrop.

<.button phx-click={LineaUI.toggle("menu")}>Menu</.button>

<.drawer id="menu" side="right">
  <nav class="p-5">…</nav>
</.drawer>

Like the modal it opens from the browser (LineaUI.open/close/toggle("id")), from the server (LineaUI.open(socket, "id")) or from open; on_close runs however it closed (Esc, the backdrop, a command), so the server can follow. A drawer does not lock the page's scroll, as in LineOne.

Summary

Functions

drawer(assigns)

Renders a drawer, closed unless open.

Functions

drawer(assigns)

Renders a drawer, closed unless open.

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

Attributes

  • id (:string) (required)
  • open (:boolean) - Defaults to false.
  • side (:string) - Defaults to "left". Must be one of "left", or "right".
  • overlay (:boolean) - The dark backdrop, which closes the drawer when clicked. Defaults to true.
  • prevent_close (:boolean) - Esc and the backdrop do not close it. Defaults to false.
  • 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 sliding frame: its width (w-72 by default, e.g. class="w-96") and shadow. Defaults to nil.
  • panel_class (:any) - Merged into the white panel inside the frame. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)