Group

Vertically centered flex box.

Import: import { Group } from '@kubed/components;'

Source: View source code

Docs: Edit this page

npm: @kubed/components

Documentation

Component Props

Basic Usage

Based on the flexbox layout, the default vertical direction is centered, and the horizontal direction can be customized.

<Group>
  <Button>1</Button>
  <Button>2</Button>
  <Button>3</Button>
</Group>

1
<Group>
2
  <Button>1</Button>
3
  <Button>2</Button>
4
  <Button>3</Button>
5
</Group>
6

Position

Use Position to set the horizontal alignment.

<>
<Group position="center">
  <Button>1</Button>
  <Button>2</Button>
  <Button>3</Button>
</Group>
<Group position="right">
  <Button>1</Button>
  <Button>2</Button>
  <Button>3</Button>
</Group>
</>

1
<>
2
<Group position="center">
3
  <Button>1</Button>
4
  <Button>2</Button>
5
  <Button>3</Button>
6
</Group>
7
<Group position="right">
8
  <Button>1</Button>
9
  <Button>2</Button>
10
  <Button>3</Button>
11
</Group>
12
</>
13

Spacing

Use spacing to set the spacing between elements in the horizontal direction

<>
  <Group position="center" spacing="xl">
    <Button>1</Button>
    <Button>2</Button>
    <Button>3</Button>
  </Group>
  <Group position="center" spacing={100} style={{ marginTop: '40px' }}>
    <Button>1</Button>
    <Button>2</Button>
    <Button>3</Button>
  </Group>
</>

1
<>
2
  <Group position="center" spacing="xl">
3
    <Button>1</Button>
4
    <Button>2</Button>
5
    <Button>3</Button>
6
  </Group>
7
  <Group position="center" spacing={100} style={{ marginTop: '40px' }}>
8
    <Button>1</Button>
9
    <Button>2</Button>
10
    <Button>3</Button>
11
  </Group>
12
</>
13

Direction

Use direction to set the arrangement direction of the elements, consistent with the flex-direction attribute parameter.

<Group direction="row-reverse">
  <Button>1</Button>
  <Button>2</Button>
  <Button>3</Button>
</Group>

1
<Group direction="row-reverse">
2
  <Button>1</Button>
3
  <Button>2</Button>
4
  <Button>3</Button>
5
</Group>
6

Grow

The grow setting element occupies the entire row.

<Group grow>
  <Button>1</Button>
  <Button>2</Button>
  <Button>3</Button>
</Group>

1
<Group grow>
2
  <Button>1</Button>
3
  <Button>2</Button>
4
  <Button>3</Button>
5
</Group>
6