LiveViewResponsive (live_view_responsive v0.1.0)
Media queries for responsive design in Phoenix LiveView.
Example
With <.media_query>
component
defmodule ExampleAppWeb.Example do
use Phoenix.Component
import LiveViewResponsive
def example(assigns) do
~H"""
<.media_query max_width={1224}>
<p>You are on a tablet or mobile</p>
</.media_query>
<.media_query min_width={1225}>
<p>You are on a desktop or laptop</p>
<.media_query min_width={1500}>
<p>You also have a huge screen</p>
</.media_query>
</.media_query>
"""
end
end
With media query assigns
defmodule ExampleAppWeb.ExampleComponent do
use ExampleAppWeb, :live_component
use LiveViewResponsive
def mount(socket) do
socket =
socket
|> assign_media_query(:tablet_or_mobile, max_width: "1224px")
|> assign_media_query(:desktop_or_laptop, min_width: "1225px")
|> assign_media_query(:portrait, orientation: "portrait")
{:ok, socket}
end
@impl true
def render(assigns) do
~H"""
<div>
<.live_view_responsive myself={@myself} />
<div :if={@live_view_responsive_synced}>
<h1>Device test</h1>
<p :if={@desktop_or_laptop}>
You are on a desktop or laptop
</p>
<p :if={@tablet_or_mobile}>
You are on a tablet or mobile phone
</p>
<p>
You are in
<%= if assigns.portrait, do: "portrait", else: "landscape" %>
orientation
</p>
</div>
</div>
"""
end
end
Summary
Functions
Link to this function
assign_media_query(socket, name, opts)
Link to this function
live_view_responsive(assigns)
See LiveViewResponsive.Components.LiveViewResponsive.live_view_responsive/1
.
Link to this function