Space
为一组相邻元素提供一致间距。中文惯用名：间距。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.space |
| 名称 | Space |
| 二级分类 | 布局（layout） |
| 用途 | 为一组相邻元素提供一致间距 |
| 描述 | 中文惯用名：间距。 |
预览
静态结构：<div data-slot="space">（flex 容器）；direction 映射 flex-row / flex-col；size 档位映射 gap（small=gap-2 / middle=gap-4 / large=gap-6），数字 size 内联 gap 像素；align 映射 items-*；wrap 追加 flex-wrap。子节点经 Renderer children 机制渲染 DSL 子树。
DSL 结构
{
"type": "Space",
"props": {
"direction": "horizontal",
"size": "middle"
},
"children": [
{
"type": "Button",
"props": {
"text": "取消"
}
},
{
"type": "Button",
"props": {
"text": "保存",
"variant": "primary"
}
}
]
}何时用
何时使用
- 一组相邻元素需要一致间距：按钮组、标签组、图标 + 文本组合。
- 需要换行的等间距排列：wrap 模式的标签云、操作集合。
- 垂直堆叠的紧凑表单项或文本行（direction: vertical）。
何时不用
- 需要主轴分布（space-between / 两端对齐）：使用 Flex。
- 行列栅格布局：使用 Grid。
- 大区块之间的篇章间距：用布局组件或间距令牌，Space 面向「相邻小元素」。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 水平 | flex-row 等间距 | 按钮组、标签组 |
| 垂直 | flex-col 等间距 | 紧凑表单项、文本行堆叠 |
| 换行 | flex-wrap 多行等间距 | 标签云、操作集合 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
direction | `'horizontal' | 'vertical'` | 'horizontal' |
size | `'small' | 'middle' | 'large' |
align | `'start' | 'center' | 'end' |
wrap | boolean | false | 超出时是否换行 |
className / style | string / CSSProperties | — | 通用：根节点 class 合并 / 内联样式（与数字 size 合并） |
使用规范
- 同组元素间距只用一档 size，不混用多档。
- 水平排列且子元素高度不一时按需设 align（图标 + 文本常用 center）。
- 超过一屏宽度的集合务必 wrap，避免横向溢出。
正例
- ✓ 卡片底部操作区：Space 排列「编辑 / 复制 / 删除」三个 Button。
- ✓ 筛选栏：Space wrap 排列若干 closable Tag。
反例
- ✕ 用 Space 做页面左右分栏（应使用 Flex / Grid）。
- ✕ 嵌套多层 Space 只为凑间距（应合并为一层并选对 size）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。