GroupCollect 1.3.142

Stacking Cluster

Renders a stacking cluster component. Behaves like a cluster on desktop and a stack on mobile.

Normal Open in playground 
<.stacking_cluster space="base">
  <.button>Button 1</.button>
  <.button primary>Button 2</.button>
</.stacking_cluster>
'justify' attribute options: Open in playground 
<.stacking_cluster space="base" justify="start">
  <.button>Button 1</.button>
  <.button primary>Button 2</.button>
</.stacking_cluster>
<.stacking_cluster space="base" justify="end">
  <.button>Button 1</.button>
  <.button primary>Button 2</.button>
</.stacking_cluster>
<.stacking_cluster space="base" justify="center">
  <.button>Button 1</.button>
  <.button primary>Button 2</.button>
</.stacking_cluster>
<.stacking_cluster space="base" justify="left">
  <.button>Button 1</.button>
  <.button primary>Button 2</.button>
</.stacking_cluster>
<.stacking_cluster space="base" justify="right">
  <.button>Button 1</.button>
  <.button primary>Button 2</.button>
</.stacking_cluster>
<.stacking_cluster space="base" justify="normal">
  <.button>Button 1</.button>
  <.button primary>Button 2</.button>
</.stacking_cluster>
<.stacking_cluster space="base" justify="between">
  <.button>Button 1</.button>
  <.button primary>Button 2</.button>
</.stacking_cluster>
<.stacking_cluster space="base" justify="around">
  <.button>Button 1</.button>
  <.button primary>Button 2</.button>
</.stacking_cluster>
<.stacking_cluster space="base" justify="evenly">
  <.button>Button 1</.button>
  <.button primary>Button 2</.button>
</.stacking_cluster>
<.stacking_cluster space="base" justify="stretch">
  <.button>Button 1</.button>
  <.button primary>Button 2</.button>
</.stacking_cluster>
With inputs Open in playground 
<.stacking_cluster space="base">
  <.input type="text" name="name" label="Name" value="" />
  <.input type="text" name="email" label="Email" value="" />
</.stacking_cluster>