TaroifyReact UI

    Space 间距

    介绍

    设置组件之间的间距。

    引入

    import { Button, Space } from "@taroify/core"

    代码演示

    基础用法

    <Space>
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
</Space>

    垂直

    <Block title="垂直">
  <Space direction="vertical" fill>
    <Button color="primary" block>
      主要按钮
    </Button>
    <Button color="primary" block>
      主要按钮
    </Button>
    <Button color="primary" block>
      主要按钮
    </Button>
  </Space>
</Block>

    间距

    <Space size="large">
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
</Space>

    自定义间距

    <Space size={16}>
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
</Space>
<Space size={[16, 32]}>
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
</Space>
<Space size={[16]}>
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
</Space>

    居中

    <Space justify="center">
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
</Space>

    不换行

    <Space wrap="nowrap">
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
</Space>

    API

    Props

    参数说明类型默认值
    direction垂直排列方式 可选值 horizontal verticalstringhorizontal
    size间距，可选值为 mini small medium large，或者自定义间距string | number | [number, number?]small
    wrap子元素的换行方式，可选值为 nowrap wrap wrap-reversebooleanwrap
    justify主轴对齐方式，可选值为 start end center space-around space-betweenstringstart
    align交叉轴对齐方式，可选值为 start center end baseline stretchstringstart
    fill是否填充整个父元素booleanfalse

    主题定制

    样式变量

    组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

    名称默认值描述
    --space-item-gap-minivar(--padding-xs)-
    --space-item-gap-smallvar(--padding-sm)-
    --space-item-gap-mediumvar(--padding-md)-
    --space-item-gap-largevar(--padding-lg)-
    --space-item-vertical-gap-minivar(--space-item-gap-mini)-
    --space-item-vertical-gap-smallvar(--space-item-gap-small)-
    --space-item-vertical-gap-mediumvar(--space-item-gap-medium)-
    --space-item-vertical-gap-largevar(--space-item-gap-large)-
    --space-item-horizontal-gap-minivar(--space-item-gap-mini)-
    --space-item-horizontal-gap-smallvar(--space-item-gap-small)-
    --space-item-horizontal-gap-mediumvar(--space-item-gap-medium)-
    --space-item-horizontal-gap-largevar(--space-item-gap-large)-