Components Slide Over

Slide Over

A Slide Over is a UI element that presents a panel that slides in above the main view, leaving the underlying content partially visible. It is normally used when the user needs additional content/information.
Origins
Router
          scope "/", YourAppWeb do
  pipe_through :browser

  live "/", SlideOverLive, :index
  live "/:origin", SlideOverLive, :slide_over
end

        
Live view/component
          defmodule SlideOver LiveView do
  use YourAppWeb, :live_view

  def mount(_params, session, socket) do
    {:ok, assign(socket, slide_over: false)}
  end

  def handle_params(params, _uri, socket) do
    case socket.assigns.live_action do
      :index ->
        {:noreply, assign(socket, slide_over: false)}
      :slide_over ->
        {:noreply, assign(socket, slide_over: params["origin"])}
    end
  end
end

        
HEEX template
          <.button label="left" link_type="live_patch" to={Routes.page_path(@socket, :slide_over, "left")} />

<%= if @slide_over do %>
  <.slide_over origin={@slide_over} max_width="sm" title="SlideOver">
    <div class="gap-5 text-sm">
      <.form_label label="Add some text here." />
      <div class="flex justify-end">
        <.button label="close" phx-click={PetalComponents.SlideOver.hide_slide_over(@slide_over)} />
      </div>
    </div>
  </.slide_over>
<% end %>

        
Properties
            attr(:origin, :string,
    default: "right",
    values: ["left", "right", "top", "bottom"],
    doc: "slideover point of origin"
  )

  attr(:close_slide_over_target, :string,
    default: nil,
    doc:
      "close_slide_over_target allows you to target a specific live component for the close event to go to. eg: close_slide_over_target={@myself}"
  )

  attr(:close_on_click_away, :boolean,
    default: true,
    doc: "whether the slideover should close when a user clicks away"
  )

  attr(:close_on_escape, :boolean,
    default: true,
    doc: "whether the slideover should close when a user hits escape"
  )

  attr(:title, :string, default: nil, doc: "slideover title")

  attr(:max_width, :string,
    default: "md",
    values: ["sm", "md", "lg", "xl", "2xl", "full"],
    doc: "sets container max-width"
  )

  attr(:class, :string, default: "", doc: "CSS class")
  attr(:hide, :boolean, default: false, doc: "slideover is hidden")
  attr(:rest, :global)
  slot(:inner_block, required: false)