Group

垂直居中的弹性盒子

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

Source: View source code

Docs: Edit this page

npm: @kubed/components

Documentation

Component Props

基础用法

基于 flexbox 的弹性盒布局，默认垂直方向居中，水平方向可以自定义对齐方式。

<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 设置水平方向上对齐方式，可以设置为 center，right，left，apart 四种参数。

<>
<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 设置水平方向的元素之间的间隔, spacing 参数可以设置为 "number"， "xs" ， "sm" ， "md" ， "lg" ， "xl"

<>
  <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 设置元素的排列方向，同 flex-direction 属性参数一致。

row(默认值)：主轴为水平方向，起点在左端
column：主轴为垂直方向，起点在上方
row-reverse:主轴为水平方向，起点在上方
column-reverse: 主轴为垂直方向，起点在下方

<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自适应宽度

grow 设置元素占满整个行。

<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

布局

常规

信息录入