GroupCollect 1.3.142

Responsive

Renders content selectively based on the viewport size.

Read more Read less

Useful in situations where responsiveness can not be totally encapsulated in individual components.

Either the ‘from’ or the ‘upto’ attribute is required.

Examples

<.responsive from="md">
  <.table id="users" rows={@users}>
<!-- this will be rendered as a table component with rows -->

  </.table>
<./responsive>

<.responsive upto="md">
  <.table id="users" rows={@users}>
<!-- this will be rendered as a set of card components -->

  <./table>
<./responsive>

Resize your screen to observe the responsive rendering logic.

From 'sm'

This box of text is shown from 560px (but not when the screen is 559px or narrower)

From 'md'

This box of text is shown from 744px (but not when the screen is 743px or narrower)

From 'lg'

This box of text is shown from 1024px (but not when the screen is 1023px or narrower)

From 'xl'

This box of text is shown from 1440px (but not when the screen is 1439px or narrower)

All examples hidden!

Attribute Type Documentation Default Value
class :any

user-provided class
[]
from :string
upto :string
rest :global
tag :string "div"
Required inner_block * :slot 
[Multiple values]