> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/components/space.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/llms-full.txt.

# Space 间距

统一一组元素之间的间距。

## 基本用法


保存取消更多

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/space/basic.tsx"
import { Button, Space } from '@ifhover/leaf-ui';

export function SpaceBasic() {
  return (
    <Space size="md" wrap>
      <Button>保存</Button>
      <Button variant="outline">取消</Button>
      <Button variant="soft">更多</Button>
    </Space>
  );
}
```

展开代码

## 更多用法


待处理已完成

Leaf UI·React

advanced.tsx

复制代码

```tsx lineNumbers file="../../src/examples/space/advanced.tsx"
import { Space, Tag } from '@ifhover/leaf-ui';

export function SpaceVertical() {
  return (
    <Space direction="vertical" size={12} align="start">
      <Tag>待处理</Tag>
      <Tag color="success">已完成</Tag>
      <Space split={<span>·</span>} size={8}>
        <span>Leaf UI</span>
        <span>React</span>
      </Space>
    </Space>
  );
}
```

展开代码

## 使用说明

size 可使用预设、像素值或 \[纵向, 横向] 间距。wrap 允许换行，split 在相邻内容之间插入分隔符。

## 类型

组装数据、定义回调和使用 ref 时，可以导入这些类型。

```ts
import type { SpaceProps } from '@ifhover/leaf-ui';
```

## SpaceProps API

| 属性          | 类型                                                            | 默认值            | 说明        |
| ----------- | ------------------------------------------------------------- | -------------- | --------- |
| `direction` | `'horizontal' \| 'vertical'`                                  | `'horizontal'` | 排列方向或移动方向 |
| `size`      | `'sm' \| 'md' \| 'lg' \| number \| readonly [number, number]` | `'md'`         | 尺寸或间距预设   |
| `align`     | `'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'`     | `'center'`     | 对齐方式      |
| `wrap`      | `boolean`                                                     | `false`        | 空间不足时换行   |
| `split`     | `ReactNode`                                                   | —              | 相邻元素分隔内容  |