LiveViewResponsive.Breakpoints (live_view_responsive v0.1.1)

Generates breakpoints for live_view_responsive package.

Usage:

defmodule ExampleApp.LiveViewResponsive do
  use LiveViewResponsive.Breakpoints, [
    mobile: [max_width: 700],
    tablet: [min_width: 701, max_width: 1200],
    desktop: [min_width: 1201],
  ]
end

Then you can import or use the module ExampleApp.LiveViewResponsive in your components.

For each breakpoint a new component named {breakpoint}_media_query is generated, for example:

<.mobile_media_query>
  You are on mobile
</.mobile_media_query>

And a function named assign_{breakpoint}_media_query is created, for example:

socket
|> assign_mobile_media_query(initial: true)
|> assign_tablet_media_query()

Summary

Functions

Link to this function

compile_breakpoints(breakpoints, breakpoints_module)