Space 间距容器
Space 现在不再只是“自己写 gap”的占位组件,而是补成了一个完整的布局原语。它使用 Rue 自己干净直接的视觉,不抢内容本身的风头,同时把常用的水平/垂直编排、对齐、换行、分隔符和 Compact 紧凑组合一次覆盖。
何时使用
- 需要把按钮、标签、统计块、输入控件排成一致的节奏,而不想在每个页面重复手写 gap。
- 需要在同一套 API 下切换 horizontal、vertical、wrap 和 separator,保持布局表达统一。
- 需要工具条、搜索栏、批量操作区这类更紧凑的组合时,可以直接切到 Space.Compact。
推荐用法
# 基础间距
最小可用写法,适合动作按钮、标签和轻量操作组。
# 方向与对齐
主轴方向和交叉轴对齐都在 Space 本身表达,不需要额外写 flex 类。
# 尺寸与自定义 Gap
使用 small / middle / large 预设,也支持 tuple 间距覆盖列距与行距。
# 自动换行
用 wrap 处理标签墙、筛选条件和批量状态块,保持行距稳定。
# Separator / Split
分隔符适合 breadcrumb、命令路径和键值对;自定义节点推荐传函数。
# Compact 横向工具条
把输入、筛选和提交动作收成一个连续控制带,适合搜索栏与操作条;Compact 默认就是无间距拼接。
# Compact 按钮拼接
补一组更接近操作面板的按钮拼接示例:图标轨道、主色动作条和带下拉收口的混合按钮组。
# Compact 垂直按钮组
再补一组纵向按钮拼接,直接把默认、dashed、primary 和 outlined 四种按钮风格摆在一起。
# Compact 纵向表单
纵向 Compact 更适合移动端或窄侧栏里的批量录入。
# 场景化组合
Space 负责主节奏,Space.Compact 负责局部收口,适合真实工作台头部。
API
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
as | 指定根节点标签或组件,适合 section、nav、article 等语义容器。 | any | 'div' |
size | 主轴与交叉轴间距,支持 small / middle / large、数字像素值和 [columnGap, rowGap]。 | 'small' | 'middle' | 'large' | number | string | [SpaceSize, SpaceSize] | 'small' |
direction | 主轴方向,保持 horizontal / vertical 两种布局。 | 'horizontal' | 'vertical' | 'horizontal' |
orientation | direction 的同义增强写法,适合和其他 Rue 组件保持语义一致。 | 'horizontal' | 'vertical' | - |
vertical | 纵向快捷开关,传入 true 时直接切为 vertical。 | boolean | false |
align | 交叉轴对齐,水平布局默认 center,垂直布局按内容自然拉伸。 | 'start' | 'end' | 'center' | 'baseline' | 'stretch' | 'center'(horizontal) |
separator / split | 在相邻项之间插入分隔内容;自定义节点推荐传函数,确保每次都生成新的分隔符实例。 | any | (() => any) | - |
wrap | 允许水平排列在空间不足时自动换行。 | boolean | false |
block | 让容器使用 flex 并占满可用宽度,适合工具条和过滤区。 | boolean | false |
itemClassName / itemStyle | 补充每个子项包装层的类名和内联样式,适合卡片、徽标和统计组。 | string / Record<string, any> | - |
className / style | 补充根容器样式。 | string / Record<string, any> | - |
Space.Compact API
Space.Compact 对应的是 compact 语义:它负责把控件压成连续组,默认不提供 gap;如果你要的是普通留白,请可以使用 Space。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
as | 指定根节点标签或组件。 | any | 'div' |
direction / orientation / vertical | Compact 的横向或纵向编排方式。 | 'horizontal' | 'vertical' | boolean | 'horizontal' |
block | 让 Compact 组占满宽度,适合表单工具条和移动端批量操作。 | boolean | false |
size | 用于调整 Compact 壳层的密度,适合文本段、标签组或自定义内容;不会生成子项间距。 | 'small' | 'middle' | 'large' | number | string | - |
className / style | 补充根容器样式。 | string / Record<string, any> | - |