GroupCollect 1.3.142

Cluster

Use a cluster when you want a group of elements beside each other that don’t necessarily take up the full width of the screen.

Read more Read less

They cannot position themselves so must be wrapped in an additional layout component. For example:

<.row justify="end">
  <.cluster>
    <.button>Cancel</.button>
    <.submit primary>Go</.button>
  </.cluster>
</.row>
Normal Open in playground
one

one

two

three

<.cluster space="none">
  <.box border="sm" padding="xs">one</.box>
  <.box border="sm" padding="xs">
    <p>one</p>
    <p>two</p>
    <p>three</p>
  </.box>
</.cluster>
Stretched Open in playground
one

one

two

three

<.cluster space="base" stretch>
  <.box border="sm" padding="xs">one</.box>
  <.box border="sm" padding="xs">
    <p>one</p>
    <p>two</p>
    <p>three</p>
  </.box>
</.cluster>
2xs Open in playground
one
two
three
four
five
six
seven
eight
nine
ten
eleven
twelve 
<.cluster space="2xs">
  <.chip id="chip-1">one</.chip>
  <.chip id="chip-2">two</.chip>
  <.chip id="chip-3">three</.chip>
  <.chip id="chip-4">four</.chip>
  <.chip id="chip-5">five</.chip>
  <.chip id="chip-6">six</.chip>
  <.chip id="chip-7">seven</.chip>
  <.chip id="chip-8">eight</.chip>
  <.chip id="chip-9">nine</.chip>
  <.chip id="chip-10">ten</.chip>
  <.chip id="chip-11">eleven</.chip>
  <.chip id="chip-12">twelve</.chip>
</.cluster>
Xs Open in playground
one
two
three
four
five
six
seven
eight
nine
ten
eleven
twelve 
<.cluster space="xs">
  <.chip id="chip-1">one</.chip>
  <.chip id="chip-2">two</.chip>
  <.chip id="chip-3">three</.chip>
  <.chip id="chip-4">four</.chip>
  <.chip id="chip-5">five</.chip>
  <.chip id="chip-6">six</.chip>
  <.chip id="chip-7">seven</.chip>
  <.chip id="chip-8">eight</.chip>
  <.chip id="chip-9">nine</.chip>
  <.chip id="chip-10">ten</.chip>
  <.chip id="chip-11">eleven</.chip>
  <.chip id="chip-12">twelve</.chip>
</.cluster>
Sm Open in playground
one
two
three
four
five
six
seven
eight
nine
ten
eleven
twelve 
<.cluster space="sm">
  <.chip id="chip-1">one</.chip>
  <.chip id="chip-2">two</.chip>
  <.chip id="chip-3">three</.chip>
  <.chip id="chip-4">four</.chip>
  <.chip id="chip-5">five</.chip>
  <.chip id="chip-6">six</.chip>
  <.chip id="chip-7">seven</.chip>
  <.chip id="chip-8">eight</.chip>
  <.chip id="chip-9">nine</.chip>
  <.chip id="chip-10">ten</.chip>
  <.chip id="chip-11">eleven</.chip>
  <.chip id="chip-12">twelve</.chip>
</.cluster>
Base Open in playground
one
two
three
four
five
six
seven
eight
nine
ten
eleven
twelve 
<.cluster space="base">
  <.chip id="chip-1">one</.chip>
  <.chip id="chip-2">two</.chip>
  <.chip id="chip-3">three</.chip>
  <.chip id="chip-4">four</.chip>
  <.chip id="chip-5">five</.chip>
  <.chip id="chip-6">six</.chip>
  <.chip id="chip-7">seven</.chip>
  <.chip id="chip-8">eight</.chip>
  <.chip id="chip-9">nine</.chip>
  <.chip id="chip-10">ten</.chip>
  <.chip id="chip-11">eleven</.chip>
  <.chip id="chip-12">twelve</.chip>
</.cluster>
Lg Open in playground
one
two
three
four
five
six
seven
eight
nine
ten
eleven
twelve 
<.cluster space="lg">
  <.chip id="chip-1">one</.chip>
  <.chip id="chip-2">two</.chip>
  <.chip id="chip-3">three</.chip>
  <.chip id="chip-4">four</.chip>
  <.chip id="chip-5">five</.chip>
  <.chip id="chip-6">six</.chip>
  <.chip id="chip-7">seven</.chip>
  <.chip id="chip-8">eight</.chip>
  <.chip id="chip-9">nine</.chip>
  <.chip id="chip-10">ten</.chip>
  <.chip id="chip-11">eleven</.chip>
  <.chip id="chip-12">twelve</.chip>
</.cluster>
Xl Open in playground
one
two
three
four
five
six
seven
eight
nine
ten
eleven
twelve 
<.cluster space="xl">
  <.chip id="chip-1">one</.chip>
  <.chip id="chip-2">two</.chip>
  <.chip id="chip-3">three</.chip>
  <.chip id="chip-4">four</.chip>
  <.chip id="chip-5">five</.chip>
  <.chip id="chip-6">six</.chip>
  <.chip id="chip-7">seven</.chip>
  <.chip id="chip-8">eight</.chip>
  <.chip id="chip-9">nine</.chip>
  <.chip id="chip-10">ten</.chip>
  <.chip id="chip-11">eleven</.chip>
  <.chip id="chip-12">twelve</.chip>
</.cluster>
2xl Open in playground
one
two
three
four
five
six
seven
eight
nine
ten
eleven
twelve 
<.cluster space="2xl">
  <.chip id="chip-1">one</.chip>
  <.chip id="chip-2">two</.chip>
  <.chip id="chip-3">three</.chip>
  <.chip id="chip-4">four</.chip>
  <.chip id="chip-5">five</.chip>
  <.chip id="chip-6">six</.chip>
  <.chip id="chip-7">seven</.chip>
  <.chip id="chip-8">eight</.chip>
  <.chip id="chip-9">nine</.chip>
  <.chip id="chip-10">ten</.chip>
  <.chip id="chip-11">eleven</.chip>
  <.chip id="chip-12">twelve</.chip>
</.cluster>