Space 间距
设置组件之间的间距。
基础用法
设置组件之间的间距，默认为水平方向，间距大小为 small (8px)。
基础用法
垂直布局
通过 direction 属性设置为 vertical。
垂直布局
不同间距
通过 size 属性设置间距大小，可选值为 mini (4px)、small (8px)、medium (16px)、large (24px)，也支持传入数字自定义像素大小，或数组 [horizontal, vertical]。
不同间距
对齐方式
通过 align 属性设置对齐方式。
居中对齐:
Box
对齐方式
主轴对齐
通过 justify 属性设置主轴对齐方式，需配合 fill 属性使用。
主轴对齐
自动换行
通过 wrap 属性设置是否自动换行。
自动换行
填充容器
通过 fill 属性让间距组件撑满父容器宽度。
填充容器
分隔符
通过 spacer 属性传入分隔符文本，或使用 #spacer 插槽自定义分隔符。
分隔符
在 Nuxt 中使用
Space 组件完全支持 Nuxt 3/4 的 SSR 渲染。间距的布局在服务端即可计算完成，首屏即呈现正确的间距效果，无需等待客户端激活。
Nuxt 中使用
SSR 注意事项：
- ✅ 间距方向 (direction)、大小 (size)、对齐 (align) 首屏即生效
- ✅ 自动换行 (wrap) 与填充 (fill) 支持 SSR
- ✅ 分隔符 (spacer) 在服务端正确渲染
- 💡 动态间距变化将在客户端激活后通过响应式系统自动完成
Nuxt 自动导入
在安装 @yh-ui/nuxt 模块后，YhSpace 组件会被自动注册，无需手动导入。
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| direction | 间距方向 | 'horizontal' | 'vertical' | 'horizontal' |
| size | 间距大小 | 'mini' | 'small' | 'medium' | 'large' | number | [SpaceSize, SpaceSize] | 'small' |
| align | 交叉轴对齐方式 | 'start' | 'end' | 'center' | 'baseline' | 'stretch' | 'center' |
| justify | 主轴对齐方式 | 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'start' |
| wrap | 是否自动换行（仅水平方向有效） | boolean | false |
| fill | 是否撑满父容器 | boolean | false |
| spacer | 间隔符文本 | string | number | — |
| theme-overrides | 主题覆盖变量 | ComponentThemeVars | — |
Slots
| 插槽名 | 说明 |
|---|---|
| default | 间距内的子元素 |
| spacer | 自定义分隔符内容 |
主题变量
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-space-spacer-padding | 分隔符内边距 | 2px |