LanternUI.Components.Sheet (LanternUI v0.8.2)

Copy Markdown View Source

Slide-over panel (drawer) that enters from a screen edge. Mirrors Fluxon's sheet/1, and shares the dialog open/close runtime with modal/1, so it's driven by LanternUI.open_dialog/1 / close_dialog/1.

<.sheet id="edit-theme" placement="right">
  <h2>Edit theme</h2>
  <p>…</p>
  <.button phx-click={LanternUI.close_dialog("edit-theme")}>Done</.button>
</.sheet>

<.button phx-click={LanternUI.open_dialog("edit-theme")}>Edit…</.button>

Focus trap, scroll lock, and Escape/backdrop dismissal come from the shared overlay runtime (the LanternSheet hook). placement slides the panel from left / right / top / bottom.

Summary

Functions

sheet(assigns)

Functions

sheet(assigns)

Attributes

  • id (:string) (required) - Stable DOM id used by open_dialog/close_dialog.
  • open (:boolean) - render already open (server-driven sheets). Defaults to false.
  • placement (:string) - Screen edge the panel slides in from. Defaults to "right". Must be one of "left", "right", "top", or "bottom".
  • title (:string) - optional header title beside the close button. Defaults to nil.
  • on_open (Phoenix.LiveView.JS) - JS command run when the sheet opens. Defaults to nil.
  • on_close (Phoenix.LiveView.JS) - JS command run when the sheet closes. Defaults to nil.
  • close_on_esc (:boolean) - Close when Escape is pressed. Defaults to true.
  • close_on_outside_click (:boolean) - Close when the backdrop is clicked. Defaults to true.
  • prevent_closing (:boolean) - Block Escape and outside-click close. Defaults to false.
  • hide_close_button (:boolean) - Hide the built-in close control. Defaults to false.
  • class (:any) - Extra classes on the sliding panel. Defaults to nil.
  • container_class (:any) - Extra classes on the overlay root. Defaults to nil.
  • backdrop_class (:any) - Extra classes on the dimmed backdrop. Defaults to nil.
  • animation (:string) - Accepted for Fluxon compat; slide is token-driven. Defaults to nil.
  • animation_enter (:string) - Accepted for Fluxon compat. Defaults to nil.
  • animation_leave (:string) - Accepted for Fluxon compat. Defaults to nil.
  • Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.

Slots

  • header - custom header content (replaces title).
  • footer - sticky footer (action buttons).
  • inner_block (required) - Sheet body content.