Lavash.Overlay.Flyover.Dsl (Lavash v0.3.0-rc.3)

Copy Markdown View Source

Spark DSL extension for flyover (slideover) behavior.

Adds flyover-specific state and actions to a Lavash Component:

  • Open/close state management (flyover owns its state)
  • Escape key handling
  • Backdrop click handling
  • Slide direction (left, right, top, bottom)
  • Auto-injected :close and :noop actions

Usage

defmodule MyApp.NavFlyover do
  use Lavash.Component, extensions: [Lavash.Overlay.Flyover.Dsl]

  flyover do
    open_field :open
    slide_from :left
    close_on_escape true
    close_on_backdrop true
  end

  render fn assigns ->
    ~H"..."
  end
end

Parent opens the flyover by binding the open state:

state :nav_open, :any, from: :ephemeral, default: nil
action :open_nav do
  set :nav_open, true
end

<.lavash_component module={MyApp.NavFlyover} id="nav-flyover"
  open={@nav_open} bind={[open: :nav_open]} />
<button phx-click="open_nav">Open</button>

The plugin will:

  1. Inject the open_field as ephemeral state (if not already defined)
  2. Inject :close action that sets open_field to nil
  3. Inject :noop action for backdrop click handling
  4. Generate render/1 with flyover chrome wrapping your content

Summary

Functions

flyover(body)

(macro)