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.

Up to 'sm'

This box of text is shown up to 559px (but not when the screen is 560px or wider)

Up to 'md'

This box of text is shown up to 743px (but not when the screen is 744px or wider)

Up to 'lg'

This box of text is shown up to 1023px (but not when the screen is 1024px or wider)

Up to 'xl'

This box of text is shown up to 1439px (but not when the screen is 1440px or wider)

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]