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>
Using the 'from' attribute Open in playground

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! 

<.box padding="lg">
  <.p>Resize your screen to observe the responsive rendering logic.</.p>
</.box>

<.row space="base">
  <.responsive from="sm">
    <.box border="sm" padding="2xl">
      <.stack space="base">
        <.h1>From 'sm'</.h1>
        <.p>This box of text is shown from 560px (but not when the screen is 559px or narrower)</.p>
      </.stack>
    </.box>
  </.responsive>
  <.responsive from="md">
    <.box border="sm" padding="2xl">
      <.stack space="base">
        <.h1>From 'md'</.h1>
        <.p>This box of text is shown from 744px (but not when the screen is 743px or narrower)</.p>
      </.stack>
    </.box>
  </.responsive>
  <.responsive from="lg">
    <.box border="sm" padding="2xl">
      <.stack space="base">
        <.h1>From 'lg'</.h1>
        <.p>This box of text is shown from 1024px (but not when the screen is 1023px or narrower)</.p>
      </.stack>
    </.box>
  </.responsive>
  <.responsive from="xl">
    <.box border="sm" padding="2xl">
      <.stack space="base">
        <.h1>From 'xl'</.h1>
        <.p>This box of text is shown from 1440px (but not when the screen is 1439px or narrower)</.p>
      </.stack>
    </.box>
  </.responsive>
  <.responsive upto="sm">
    <.box border="sm" padding="2xl">
      <.stack space="base">
        <.p>All examples hidden!</.p>
      </.stack>
    </.box>
  </.responsive>
</.row>
Using the 'upto' attribute Open in playground

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! 

<.box padding="lg">
  <.p>Resize your screen to observe the responsive rendering logic.</.p>
</.box>

<.row space="base">
  <.responsive upto="sm">
    <.box border="sm" padding="2xl">
      <.stack space="base">
        <.h1>Up to 'sm'</.h1>
        <.p>This box of text is shown up to 559px (but not when the screen is 560px or wider)</.p>
      </.stack>
    </.box>
  </.responsive>
  <.responsive upto="md">
    <.box border="sm" padding="2xl">
      <.stack space="base">
        <.h1>Up to 'md'</.h1>
        <.p>This box of text is shown up to 743px (but not when the screen is 744px or wider)</.p>
      </.stack>
    </.box>
  </.responsive>
  <.responsive upto="lg">
    <.box border="sm" padding="2xl">
      <.stack space="base">
        <.h1>Up to 'lg'</.h1>
        <.p>This box of text is shown up to 1023px (but not when the screen is 1024px or wider)</.p>
      </.stack>
    </.box>
  </.responsive>
  <.responsive upto="xl">
    <.box border="sm" padding="2xl">
      <.stack space="base">
        <.h1>Up to 'xl'</.h1>
        <.p>This box of text is shown up to 1439px (but not when the screen is 1440px or wider)</.p>
      </.stack>
    </.box>
  </.responsive>
  <.responsive from="xl">
    <.box border="sm" padding="2xl">
      <.stack space="base">
        <.p>All examples hidden!</.p>
      </.stack>
    </.box>
  </.responsive>
</.row>
Using the 'upto' and 'from' attributes Open in playground

Resize your screen to observe the responsive rendering logic.

From 'sm' up to 'lg'

This box of text is shown from 560px to 1023px.

It is not shown on screens 559px or narrower, nor on screens 1024px or wider.

From 'md' up to 'xl'

This box of text is shown from 744px to 1439px.

It is not shown on screens 743px or narrower, nor on screens 1440px or wider.

All examples hidden!

All examples hidden! 

<.box padding="lg">
  <.p>Resize your screen to observe the responsive rendering logic.</.p>
</.box>

<.row space="base">
  <.responsive from="sm" upto="lg">
    <.box border="sm" padding="2xl">
      <.stack space="base">
        <.h1>From 'sm' up to 'lg'</.h1>
        <.p>This box of text is shown from 560px to 1023px.</.p>
        <.p>It is not shown on screens 559px or narrower, nor on screens 1024px or wider.</.p>
      </.stack>
    </.box>
  </.responsive>
  <.responsive from="md" upto="xl">
    <.box border="sm" padding="2xl">
      <.stack space="base">
        <.h1>From 'md' up to 'xl'</.h1>
        <.p>This box of text is shown from 744px to 1439px.</.p>
        <.p>It is not shown on screens 743px or narrower, nor on screens 1440px or wider.</.p>
      </.stack>
    </.box>
  </.responsive>
  <.responsive from="xl">
    <.box border="sm" padding="2xl">
      <.stack space="base">
        <.p>All examples hidden!</.p>
      </.stack>
    </.box>
  </.responsive>
  <.responsive upto="sm">
    <.box border="sm" padding="2xl">
      <.stack space="base">
        <.p>All examples hidden!</.p>
      </.stack>
    </.box>
  </.responsive>
</.row>