LiveViewResponsive.Core (live_view_responsive v0.1.1)

Core LiveViewResponsive module.

Summary

Functions

Assigns a boolean value that is automatically updated based on whether the media query matches.

Functions

Link to this function

assign_media_query(socket, name, opts)

@spec assign_media_query(Phoenix.LiveView.Socket.t(), atom(), [
  {atom(), number() | String.t() | boolean()}
]) :: Phoenix.LiveView.Socket.t()

Assigns a boolean value that is automatically updated based on whether the media query matches.

Requires LiveViewResponsive.Components.LiveViewResponsive.live_view_responsive/1 to be rendered in the template and use LiveViewResponsive definition in the live component module.

When information about all matching media queries is received from the front-end for the first time, the assign @live_view_responsive_synced is set to true.

Options

  • Media types and features from media_types_and_features.ex.
  • initial - initial value of media query assign before information about matching is received. By default false.

Example

@impl true
def mount(socket) do
  socket =
    socket
    |> assign_media_query(:tablet_or_mobile, max_width: "1224px", initial: true)
    |> assign_media_query(:desktop_or_laptop, min_width: "1225px")
    |> assign_media_query(:portrait, orientation: "portrait")

  {:ok, socket}
end