A component which shows or hides children on the front-end side based on a media query.

Uses the LiveViewResponsiveMediaQueryHook hook.

Example

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

Attributes

• query (:string) - Custom media query. When used, other attributes are ignored.
• all (:boolean)
• grid (:boolean)
• aural (:boolean)
• braille (:boolean)
• handheld (:boolean)
• print (:boolean)
• projection (:boolean)
• screen (:boolean)
• tty (:boolean)
• tv (:boolean)
• embossed (:boolean)
• orientation (:any) - Must be one of :portrait, :landscape, "portrait", or "landscape".
• scan (:any) - Must be one of :progressive, :interlace, "progressive", or "interlace".
• aspect_ratio (:any) - String or number. When number is passed, suffix px is added.
• min_aspect_ratio (:any) - String or number. When number is passed, suffix px is added.
• max_aspect_ratio (:any) - String or number. When number is passed, suffix px is added.
• device_aspect_ratio (:any) - String or number. When number is passed, suffix px is added.
• min_device_aspect_ratio (:any) - String or number. When number is passed, suffix px is added.
• max_device_aspect_ratio (:any) - String or number. When number is passed, suffix px is added.
• height (:any) - String or number. When number is passed, suffix px is added.
• min_height (:any) - String or number. When number is passed, suffix px is added.
• max_height (:any) - String or number. When number is passed, suffix px is added.
• device_height (:any) - String or number. When number is passed, suffix px is added.
• min_device_height (:any) - String or number. When number is passed, suffix px is added.
• max_device_height (:any) - String or number. When number is passed, suffix px is added.
• width (:any) - String or number. When number is passed, suffix px is added.
• min_width (:any) - String or number. When number is passed, suffix px is added.
• max_width (:any) - String or number. When number is passed, suffix px is added.
• device_width (:any) - String or number. When number is passed, suffix px is added.
• min_device_width (:any) - String or number. When number is passed, suffix px is added.
• max_device_width (:any) - String or number. When number is passed, suffix px is added.
• color (:boolean)
• min_color (:integer)
• max_color (:integer)
• color_index (:boolean)
• min_color_index (:integer)
• max_color_index (:integer)
• monochrome (:boolean)
• min_monochrome (:integer)
• max_monochrome (:integer)
• resolution (:any) - String or number. When number is passed, suffix px is added.
• min_resolution (:any) - String or number. When number is passed, suffix px is added.
• max_resolution (:any) - String or number. When number is passed, suffix px is added.
• rest (:any) - String or number. When number is passed, suffix px is added.