LiveViewResponsive.Components.MediaQuery (live_view_responsive v0.1.0)
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, suffixpx
is added.min_aspect_ratio
(:any
) - String or number. When number is passed, suffixpx
is added.max_aspect_ratio
(:any
) - String or number. When number is passed, suffixpx
is added.device_aspect_ratio
(:any
) - String or number. When number is passed, suffixpx
is added.min_device_aspect_ratio
(:any
) - String or number. When number is passed, suffixpx
is added.max_device_aspect_ratio
(:any
) - String or number. When number is passed, suffixpx
is added.height
(:any
) - String or number. When number is passed, suffixpx
is added.min_height
(:any
) - String or number. When number is passed, suffixpx
is added.max_height
(:any
) - String or number. When number is passed, suffixpx
is added.device_height
(:any
) - String or number. When number is passed, suffixpx
is added.min_device_height
(:any
) - String or number. When number is passed, suffixpx
is added.max_device_height
(:any
) - String or number. When number is passed, suffixpx
is added.width
(:any
) - String or number. When number is passed, suffixpx
is added.min_width
(:any
) - String or number. When number is passed, suffixpx
is added.max_width
(:any
) - String or number. When number is passed, suffixpx
is added.device_width
(:any
) - String or number. When number is passed, suffixpx
is added.min_device_width
(:any
) - String or number. When number is passed, suffixpx
is added.max_device_width
(:any
) - String or number. When number is passed, suffixpx
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, suffixpx
is added.min_resolution
(:any
) - String or number. When number is passed, suffixpx
is added.max_resolution
(:any
) - String or number. When number is passed, suffixpx
is added.rest
(:any
) - String or number. When number is passed, suffixpx
is added.