LiveViewResponsive.Components.MediaQuery (live_view_responsive v0.1.1)

Module containing <.media_query> component.

Summary

Functions

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

Functions

Link to this function

media_query(assigns)

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.