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>

    自定义间距

    通过 size 设置间距。传入数字时会通过 Taro 的尺寸转换处理；也可以传入带单位的字符串、CSS 变量，或者使用数组分别设置 [水平间距, 垂直间距]。

    <Space size={16}>
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
</Space>
<Space size="32px">
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
</Space>
<Space size="var(--space-gap)">
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
</Space>
<Space size={[16, "32px"]}>
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
</Space>

    分隔符 v1.0.2

    通过 separator 在相邻子元素之间设置分隔内容。

    <Space separator="|">
  <Button variant="text" color="primary">编辑</Button>
  <Button variant="text" color="primary">删除</Button>
  <Button variant="text" 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 verticalSpaceDirectionhorizontal
    size间距大小，数组依次表示水平和垂直间距SpaceSizesmall
    wrap子元素的换行方式，可选值为 nowrap wrap wrap-reverseSpaceWrapwrap
    justify主轴对齐方式，可选值为 start end center space-around space-betweenSpaceJustifystart
    align交叉轴对齐方式，可选值为 start center end baseline stretchSpaceAlignstart
    fill是否填充整个父元素booleanfalse
    separator v1.0.2相邻子元素之间的分隔内容ReactNode-

    类型定义

    组件导出以下类型定义：

    import type {
  SpaceAlign,
  SpaceDirection,
  SpaceJustify,
  SpaceProps,
  SpaceSize,
  SpaceSizePreset,
  SpaceSizeValue,
  SpaceThemeVars,
  SpaceWrap,
} from "@taroify/core"

    SpaceSize 支持预设尺寸、数字、带单位的字符串、CSS 变量，以及由这些值组成的数组：

    type SpaceSize =
  | "mini"
  | "small"
  | "medium"
  | "large"
  | number
  | string
  | [number | string, (number | string)?]

    主题定制

    样式变量

    组件提供了下列 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)-