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
Defaults are indicated in bold.
Name | Type | Options |
---|---|---|
origin | :string | `left`, right , `top`, `bottom` |
title | :string | - |
max_width | :string | `sm`, md , `lg`, `xl`, `2xl`, `full` |
inner_block | :slot | - |
class | :string | - |